<template>
  <div class="container">
    <div class="main" v-show="!isShow">
      <div class="left-content">
        <div class="item-content" style="margin: 40px">
          <div class="item-title">数字航道</div>
          <div class="flex" style="margin: 8px 28px 0px 28px">
            <div class="item" style="width: 33%; margin-right: 0.5%">
              <div class="top1 top-new">
                <div @click="changeTop(1)" :class="['title', active == 1 ? 'active' : '']">
                  航道概况
                </div>
                <div class="shimmer-container">
                  <slot></slot>
                </div>
                <!-- <div @click="changeTop(2)" :class="['title', active == 2 ? 'active' : '']">
                  行政许可
                </div> -->

              </div>
              <div v-if="active == 1">
                <div class="first-part">
                  <div class="count-item">
                    <div class="name" style="font-size: 20px">
                      航道总里程<br />(公里)
                    </div>
                    <div class="value" style="font-size: 40px">
                      {{
                        animatedValues.totalMileage.toFixed(0)||
                        "--"
                      }}
                    </div>
                  </div>
                  <div class="count1-item">
                    <div class="sub-item">
                      <div class="name">
                        <div class="first-color"></div>
                        内河航道里程<br />(公里)
                      </div>
                      <div class="value">{{ animatedValues.inlandWaterway.toFixed(0)|| "--" }}</div>
                    </div>
                    <div class="sub-item">
                      <div class="name">
                        <div class="first-color1"></div>
                        内河高等级航道<br />里程(公里)
                      </div>
                      <div class="value">{{ animatedValues.highLevelMile.toFixed(0) || "--" }}</div>
                    </div>
                  </div>
                </div>
                <div class="second-part">
                  <div class="sub-title">
                    各辖区内河等级航道维护里程分布情况
                  </div>
                  <div id="first-chart" style="height: 300px; width: 100%"></div>
                </div>
              </div>
              <div v-if="active == 2" class="administrative-licensing">
                <div class="more">
                  <span @click="clickMore">{{ !isMore ? "查看更多" : "返回"
                    }}<el-icon>
                      <DArrowRight />
                    </el-icon>
                  </span>
                </div>
                <div v-if="!isMore">
                  <div class="first-part">
                    <div class="count-item">
                      <div class="name">总批复</div>
                      <div class="value">
                        {{ administrativeData.licenceCount || "--" }}
                      </div>
                    </div>
                    <div class="count-item">
                      <div class="name">批复前</div>
                      <div class="value">
                        {{ administrativeData.beforeReplyCount || "--" }}
                      </div>
                    </div>
                    <div class="count-item">
                      <div class="name">批复中</div>
                      <div class="value">
                        {{ administrativeData.underReplyCount || "--" }}
                      </div>
                    </div>
                    <div class="count-item">
                      <div class="name">已完结</div>
                      <div class="value">
                        {{ administrativeData.replyCount || "--" }}
                      </div>
                    </div>
                  </div>
                  <div class="first-part second" style="margin-bottom: 16px">
                    <div class="count-item">
                      <div class="name">已批复许可情况</div>
                      <div class="value">
                        {{ administrativeData.replyCount || "--" }}
                      </div>
                    </div>
                    <div class="count-item">
                      <div class="name">已批复许可有效期情况</div>
                      <div class="value">
                        {{ administrativeData.replyCount || "--" }}
                      </div>
                    </div>
                  </div>
                  <div id="administrative-chart"></div>
                </div>
                <div v-else>
                  <div class="second-part">
                    <div class="sub-title">
                      区域中心许可情况汇总：<span style="font-weight: bold">{{
                        administrativeData.replyCount || "--"
                      }}</span>
                    </div>
                    <div id="administrativeMore-chart" style="height: 380px; width: 100%"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item1" style="width: 33%; margin-right: 0.5%">
              <div class="top1">
                <div class="title">航标总数</div>
              </div>
              <div class="first-part">
                <div class="scroll-container">
                  <div class="row">
                    <div class="other-count-item">
                      <div class="name">航标总数(座)</div>
                      <div class="value">{{ navigationMarkData.beaconSum }}</div>
                    </div>
                    <div class="other-count-item1">
                      <div class="sub">
                        <div class="su">
                          <div class="name">内河航标总数(座)</div>
                          <div class="value">{{ navigationMarkData.nhBeaconSum }}</div>
                        </div>
                        <div class="su">
                          <div class="name">沿海航标总数(座)</div>
                          <div class="value">{{ navigationMarkData.yhBeaconSum }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row1">
                    <div class="other-count-item">
                      <div class="name">遥测遥控航标<br />总数(座)</div>
                      <div class="value">{{ navigationMarkData.departmentRtuBeaconSum }}</div>
                    </div>
                    <div class="other-count-item2">
                      <div class="sub">
                        <div>
                          <div class="name">内河遥测遥<br />控航标总数(座)</div>
                          <div class="value">{{ navigationMarkData.departmentInlandRiverRtuBeaconSum }}</div>
                        </div>
                        <div>
                          <div class="name">沿海遥测遥<br />控航标总数(座)</div>
                          <div class="value">{{ navigationMarkData.departmentCoastalAreaRtuBeaconSum }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 重复内容使用滑动轮 -->
                <div class="scroll-container">
                  <div class="row">
                    <div class="other-count-item">
                      <div class="name">航标总数(座)</div>
                      <div class="value">{{ navigationMarkData.beaconSum }}</div>
                    </div>
                    <div class="other-count-item1">
                      <div class="sub">
                        <div class="su">
                          <div class="name">内河航标总数(座)</div>
                          <div class="value">{{ navigationMarkData.nhBeaconSum }}</div>
                        </div>
                        <div class="su">
                          <div class="name">沿海航标总数(座)</div>
                          <div class="value">{{ navigationMarkData.yhBeaconSum }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row1">
                    <div class="other-count-item">
                      <div class="name">遥测遥控航标<br />总数(座)</div>
                      <div class="value">{{ navigationMarkData.departmentRtuBeaconSum }}</div>
                    </div>
                    <div class="other-count-item2">
                      <div class="sub">
                        <div>
                          <div class="name">内河遥测遥<br />控航标总数(座)</div>
                          <div class="value">{{ navigationMarkData.departmentInlandRiverRtuBeaconSum }}</div>
                        </div>
                        <div>
                          <div class="name">沿海遥测遥<br />控航标总数(座)</div>
                          <div class="value">{{ navigationMarkData.departmentCoastalAreaRtuBeaconSum }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="second-part">
                <div class="sub-title">遥测遥控航标分布详情</div>
                <div id="fourth-chart" style="height: 280px; width: 100%"></div>
              </div>
            </div>
            <div class="item" style="width: 33%">
              <div class="top1">
                <div class="title">船舶概览</div>
                <el-radio-group v-model="shipRadio">
                  <el-radio-button label="工作船概览" value="工作船概览" />
                  <el-radio-button label="地市船舶" value="地市船舶" />
                </el-radio-group>
                <div class="shimmer-container">
                  <slot></slot>
                </div>
              </div>
              <div class="radio-content" v-show="shipRadio === '工作船概览'">
                <div class="ship-count">
                  <div class="ship-count-item">
                    <div class="name">船舶总量(艘)</div>
                    <div class="value">{{  animatedValues.cbN.toFixed(0) }}</div>
                  </div>
                  <div class="ship-count-item">
                    <div class="name">正常使用(艘)</div>
                    <div class="value">{{ animatedValues.nor.toFixed(0) }}</div>
                  </div>
                </div>
                <div class="select-radio">
                  <el-radio-group v-model="shipTypeRadio">
                    <el-radio-button label="技术等级" value="技术等级" />
                    <el-radio-button label="船舶分类" value="船舶分类" />
                  </el-radio-group>
                </div>
                <div id="fourteenth-chart" style="height: 300px; width: 100%;margin-top: -17px;"
                  v-show="shipTypeRadio === '技术等级'"></div>
                <div id="fifteenth-chart" style="height: 300px; width: 500px;margin-top: -17px;"
                  v-show="shipTypeRadio === '船舶分类'"></div>
              </div>
              <div class="radio-content" v-show="shipRadio === '地市船舶'">
                <div id="sixteenth-chart" style="height: 450px; width: 500px"></div>
              </div>
            </div>
          </div>
          <div class="flex" style="margin: 0px 28px">
            <div class="item" style="margin-right: 2%">
              <div class="top">
                <div class="title">桥梁信息</div>
                <div class="shimmer-container1">
                  <slot></slot>
                </div>
              </div>

              <div class="first-part">
                <div class="other-count-item">
                  <div class="name" style="font-size: 20px">桥梁总数(座)</div>
                  <div class="value" style="font-size: 40px">
                    {{ animatedValues.total.toFixed(0) || "--" }}
                  </div>
                </div>
                <div class="other-count-item1">
                  <div class="sub">
                    <div>
                      <div class="name">高等级航道桥梁<br />(座)</div>
                      <div class="value">{{ animatedValues.bgHigh.toFixed(0) || "--" }}</div>
                    </div>
                  </div>
                  <div>
                    <div class="name">等级航道桥梁<br />(座)</div>
                    <div class="value">
                      {{ animatedValues.bgOther.toFixed(0) || "--" }}
                    </div>
                  </div>
                </div>
                <div class="other-count-item1">
                  <div class="sub">
                    <div>
                      <div class="name">高等级航道<br />(净空达标桥梁)</div>
                      <div class="value">
                        {{ animatedValues.bgDabiaoHigh.toFixed(0) || "--" }}
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="name">高等级航道<br />(净空不达标桥梁)</div>
                    <div class="value">
                      {{ animatedValues.bgNoDabiao.toFixed(0) || "--" }}
                    </div>
                  </div>
                </div>
              </div>
              <div style="display: flex">
                <div class="second-part" style="width: 50%; margin-right: 20px">
                  <div class="sub-title">桥梁净高达标情况分布情况</div>
                  <div class="tips">
                    <div class="tips-item">
                      <div class="first-color"></div>
                      高等级航道达标桥梁占比
                    </div>
                    <div class="tips-item">
                      <div class="second-color"></div>
                      4-7级航道达标桥梁占比
                    </div>
                  </div>
                  <div class="tips">
                    <div class="tips-item1">区域中心</div>
                    <div class="tips-item1">桥梁占比</div>
                  </div>
                  <div class="progress-list progress">
                    <!-- 实现动画循环播放 -->
                    <div class="progress-scroll">
                      <div class="progress-item" v-for="(item, index) in bgDbDistributeData" :key="index">
                        <div class="name">
                          <div>{{ item.bmPname }}</div>
                          <div style="display: flex;">
                            <span style="color:#78DFFF">{{ item.highLevel }}%</span>
                            <span>/</span>
                            <span style="color:#FFC733">{{ item.lowLevel }}%</span>
                          </div>
                        </div>
                        <el-progress :percentage="item.highLevel" :show-text="false" color="#78DFFF"></el-progress>
                        <el-progress :percentage="item.lowLevel" :show-text="false" color="#FFC733"></el-progress>
                      </div>
                      <!-- 重复内容，以便展现滑动效果 -->
                      <div class="progress-item" v-for="(item, index) in bgDbDistributeData" :key="index">
                        <div class="name">
                          <div>{{ item.bmPname }}</div>
                          <div style="display: flex;">
                            <span style="color:#78DFFF">{{ item.highLevel }}%</span>
                            <span>/</span>
                            <span style="color:#FFC733">{{ item.lowLevel }}%</span>
                          </div>
                        </div>
                        <el-progress :percentage="item.highLevel" :show-text="false" color="#78DFFF"></el-progress>
                        <el-progress :percentage="item.lowLevel" :show-text="false" color="#FFC733"></el-progress>
                      </div>
                      <div class="progress-item" v-for="(item, index) in bgDbDistributeData" :key="index">
                        <div class="name">
                          <div>{{ item.bmPname }}</div>
                          <div style="display: flex;">
                            <span style="color:#78DFFF">{{ item.highLevel }}%</span>
                            <span>/</span>
                            <span style="color:#FFC733">{{ item.lowLevel }}%</span>
                          </div>
                        </div>
                        <el-progress :percentage="item.highLevel" :show-text="false" color="#78DFFF"></el-progress>
                        <el-progress :percentage="item.lowLevel" :show-text="false" color="#FFC733"></el-progress>
                      </div>
                      <div class="progress-item" v-for="(item, index) in bgDbDistributeData" :key="index">
                        <div class="name">
                          <div>{{ item.bmPname }}</div>
                          <div style="display: flex;">
                            <span style="color:#78DFFF">{{ item.highLevel }}%</span>
                            <span>/</span>
                            <span style="color:#FFC733">{{ item.lowLevel }}%</span>
                          </div>
                        </div>
                        <el-progress :percentage="item.highLevel" :show-text="false" color="#78DFFF"></el-progress>
                        <el-progress :percentage="item.lowLevel" :show-text="false" color="#FFC733"></el-progress>
                      </div>
                      <div class="progress-item" v-for="(item, index) in bgDbDistributeData" :key="index">
                        <div class="name">
                          <div>{{ item.bmPname }}</div>
                          <div style="display: flex;">
                            <span style="color:#78DFFF">{{ item.highLevel }}%</span>
                            <span>/</span>
                            <span style="color:#FFC733">{{ item.lowLevel }}%</span>
                          </div>
                        </div>
                        <el-progress :percentage="item.highLevel" :show-text="false" color="#78DFFF"></el-progress>
                        <el-progress :percentage="item.lowLevel" :show-text="false" color="#FFC733"></el-progress>
                      </div>
                      <div class="progress-item" v-for="(item, index) in bgDbDistributeData" :key="index">
                        <div class="name">
                          <div>{{ item.bmPname }}</div>
                          <div style="display: flex;">
                            <span style="color:#78DFFF">{{ item.highLevel }}%</span>
                            <span>/</span>
                            <span style="color:#FFC733">{{ item.lowLevel }}%</span>
                          </div>
                        </div>
                        <el-progress :percentage="item.highLevel" :show-text="false" color="#78DFFF"></el-progress>
                        <el-progress :percentage="item.lowLevel" :show-text="false" color="#FFC733"></el-progress>
                      </div>
                    </div>
                  </div>
                  <!-- <div id="second-chart" style="height: 320px;width: 100%;"></div> -->
                </div>
                <div class="second-part" style="width: 50%">
                  <div class="sub-title" style="display: flex; justify-content: space-between">
                    <div>桥梁净高实时值</div>
                    <el-select v-model="depart" placeholder="请选择" @change="departChange" style="width: 100px">
                      <el-option v-for="item in departData" :key="item.name" :label="item.name" :value="item.name" />
                    </el-select>
                  </div>
                  <el-table ref="myTable" :data="bgHighHoleData" height="320" @mouseover="clearScroll"
                    @mouseleave="createScroll" style="width: 100%; margin-top: 4px">
                    <el-table-column prop="bmPname" label="区域中心" width="80" />
                    <el-table-column prop="name" label="桥梁名称" width="180" />
                    <el-table-column prop="jgz" label="通航孔净高值" width="120" />
                  </el-table>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="top">
                <div class="title">船闸信息</div>
                <div class="shimmer-container1">
                  <slot></slot>
                </div>
              </div>
              <div class="third">
                <div class="third-part">
                  <div class="another-count" style="margin-right: 20px">
                    <div class="another-count-item" style="width: 17%">
                      <div class="img">
                        <img src="../assets/images/big-screen/beijiang-icon.png" alt="" />
                      </div>
                    </div>
                    <div class="another-count-item" style="width: 32%">
                      <div class="name">北江船闸数</div>
                      <div class="value">{{animatedValues.totalNums.toFixed(0)}}</div>
                    </div>
                    <div class="another-count-item" style="width: 17%">
                      <div class="name">Ⅲ级</div>
                      <div class="value">{{ animatedValues.threes.toFixed(0) }}</div>
                    </div>
                    <div class="another-count-item" style="width: 17%">
                      <div class="name">Ⅳ级</div>
                      <div class="value">{{animatedValues.fours.toFixed(0) }}</div>
                    </div>
                    <div class="another-count-item" style="width: 17%">
                      <div class="name">Ⅴ级</div>
                      <div class="value">{{ animatedValues.fives.toFixed(0) }}</div>
                    </div>
                  </div>
                  <div class="second-part" style="width: 89%; margin-right: 20px">
                    <div class="sub-title" style="border-bottom: 0">
                      上月过闸船舶货物类型统计分析
                    </div>
                    <div id="third-chart" style="height: 330px;width: 353px;"></div>
                  </div>
                </div>
                <div class="third-part">
                  <div class="another-count">
                    <div class="another-count-item" style="width: 17%">
                      <div class="img">
                        <img src="../assets/images/big-screen/lianjiang-icon.png" alt="" />
                      </div>
                    </div>
                    <div class="another-count-item" style="width: 33%">
                      <div class="name">连江船闸数</div>
                      <div class="value">{{ animatedValues.totalNums1.toFixed(0) }}</div>
                    </div>
                    <div class="another-count-item" style="width: 25%">
                      <div class="name">Ⅳ级</div>
                      <div class="value">{{ animatedValues.fours1.toFixed(0) }}</div>
                    </div>
                    <div class="another-count-item" style="width: 25%">
                      <div class="name">Ⅵ级</div>
                      <div class="value">{{ animatedValues.sixs1.toFixed(0) }}</div>
                    </div>
                  </div>
                  <div class="second-part" style="width: 100%; margin-right: 20px">

                    <div id="third-chart" style="height: 350px; width: 100%">
                      <div class="second-part" style="width: 100%">
                        <div class="sub-title" style="border-bottom: 0">
                          变形监测统计分析
                        </div>
                        <div class="list" ref="myTables">
                          <div v-for="(item, index) in deformationData" :key="index" class="list-item"
                            @mouseover="clearScrolls" @mouseleave="createScrolls">
                            <div class="item-tit">{{ item.name }}</div>
                            <div class="item-name">
                              <div>预警数</div>
                              <div>一级</div>
                              <div>二级</div>
                              <div>三级</div>
                            </div>
                            <div class="item-value">
                              <div>{{ item.totalnum }}</div>
                              <div>{{ item.onelevel }}</div>
                              <div>{{ item.twolevel }}</div>
                              <div>{{ item.threelevel }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>

                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="middle-content">
        <OlArc ref="OlArcRef"></OlArc>
        <div class="special-topic">
          <div class="topic-active">数字水运</div>
          <div class="topic" @click="
              router.push({
                path: '/traffic-channel/szsy/big-screen/bigScreenZhaba',
              })
            ">
            闸坝智能调度与安全监测
          </div>
          <div class="topic" @click="
              router.push({
                path: '/traffic-channel/szsy/big-screen/bigScreenQiaoqu',
              })
            ">
            水上桥区管控
          </div>
          <div class="topic" @click="isShow = true">琼州海峡保畅通系统联动</div>
        </div>
        <div class="legend magic-border" :class="{'expanded': isShowLegend}">
          <div class="legend-title" @click="isShowLegend = !isShowLegend">
            <div>图例</div> <img src="../assets/images/big-screen/icon-shouqi.png" v-if="!isShowLegend" /> <img
              src="../assets/images/big-screen/icon-zhankai.png" v-else />
          </div>
          <div v-show="isShowLegend">
            <div class="legend-info" style="border-bottom: 1px solid rgba(120, 223, 255, 0.4)">
              <div class="legend-item" style="margin-bottom: 11px">
                <img src="../assets/images/big-screen/map-one.png" alt="" />
                <div class="name">省中心</div>
              </div>
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-two.png" alt="" />
                <div class="name">区域中心</div>
              </div>
            </div>
            <div class="legend-info" style="border-bottom: 1px solid rgba(120, 223, 255, 0.4)">
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-three.png" alt="" />
                <div class="name">船闸</div>
              </div>
            </div>
            <div class="legend-info" style="border-bottom: 1px solid rgba(120, 223, 255, 0.4)">
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-four.png" alt="" />
                <div class="name">桥梁</div>
              </div>
            </div>
            <div class="legend-info" style="border-bottom: 1px solid rgba(120, 223, 255, 0.4)">
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-five.png" alt="" />
                <div class="name">国际枢纽港</div>
              </div>
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-six.png" alt="" />
                <div class="name">沿海主要港口</div>
              </div>
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-seven.png" alt="" />
                <div class="name">沿海重要港口</div>
              </div>
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-eight.png" alt="" />
                <div class="name">内河主要港口</div>
              </div>
              <div class="legend-item">
                <img src="../assets/images/big-screen/map-nine.png" alt="" />
                <div class="name">内河重要港口</div>
              </div>
            </div>
            <div class="legend-info" style="border-bottom: 1px solid rgba(120, 223, 255, 0.4)">
              <div class="legend-item">
                <img src="../assets/images/big-screen/ais.png" alt="" />
                <div class="name">AIS船舶</div>
              </div>
            </div>
            <div class="legend-info" style="border-bottom: 1px solid rgba(120, 223, 255, 0.4)">
              <div class="legend-item">
                <img src="../assets/images/big-screen/working-ship.png" alt="" />
                <div class="name">工作船舶</div>
              </div>
            </div>
          </div>
        </div>
        <div class="filter magic-border" :class="{'expanded': isShowFilter}">
          <div class="filter-title" @click="isShowFilter = !isShowFilter">
            <div>筛选</div> <img src="../assets/images/big-screen/icon-shouqi.png" v-if="!isShowFilter" /> <img
              src="../assets/images/big-screen/icon-zhankai.png" v-else />
          </div>
          <div v-show="isShowFilter">
            <div class="filter-item">
              <el-checkbox v-model="checkAll1" :indeterminate="isIndeterminate1" @change="handleCheckAllChange1"
                style="margin-bottom: 8px">
                区域中心
              </el-checkbox>
              <el-checkbox-group v-model="checkedValues1" @change="handleCheckedChange1" style="
                  display: flex;
                  flex-direction: column;
                  margin-left: 20px;
                  height: 200px;
                  overflow-y: auto;
                ">
                <el-checkbox v-for="item in options1" :key="item" :label="item" :value="item"
                  style="margin-bottom: 12px">
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="checkAll2" :indeterminate="isIndeterminate2" @change="handleCheckAllChange2">
                流域
              </el-checkbox>
              <el-checkbox-group v-model="checkedValues2" @change="handleCheckedChange2"
                style="display: flex; flex-direction: column; margin-left: 20px">
                <el-checkbox v-for="item in options2" :key="item" :label="item" :value="item">
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="checkAll3" :indeterminate="isIndeterminate3" @change="handleCheckAllChange3">
                等级航道
              </el-checkbox>
              <el-checkbox-group v-model="checkedValues3" @change="handleCheckedChange3"
                style="display: flex; flex-direction: column; margin-left: 20px">
                <el-checkbox v-for="item in options3" :key="item" :label="item" :value="item">
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="qiaoliang" @change="handleFilter">
                桥梁
              </el-checkbox>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="chuanzha" @change="handleFilter">
                船闸
              </el-checkbox>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="gangkou" @change="handleFilter">
                港口
              </el-checkbox>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="ais" @change="handleFilter">
                AIS船舶
              </el-checkbox>
            </div>
            <div class="filter-item">
              <el-checkbox v-model="working" @change="handleFilter">
                工作船舶
              </el-checkbox>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="item-content" style="height: 627px; margin: 42px 40px 28px 40px">
          <div class="item-title">数字航运</div>
          <div class="flex">
            <div class="item" style="width: 32%; margin: 8px 20px 28px 28px">
              <div class="top1">
                <div class="tit">水路运输企业</div>
                <div class="shimmer-container">
                  <slot></slot>
                </div>
              </div>
              <div class="count-one">
                <div class="left-part">
                  <div class="name">水路运输企业(家)</div>
                  <div class="value">{{ animatedValues.totalComs.toFixed(0) }}</div>
                  <img src="../assets/images/big-screen/base-bg.png" alt="" class="base-bg" />
                </div>
                <div class="right-part">
                  <div class="right-part-item">
                    <div class="val1">国内航运经营人</div>
                    <div class="val2">{{ animatedValues.gnhys.toFixed(0) }}</div>
                    <div class="val3">hangy
                      同比：{{ waterWayCompanyData.gnhyTb }}%
                      <img src="../assets/images/big-screen/down-sanjiao.png" alt="" />
                    </div>
                  </div>
                  <div class="right-part-item">
                    <div class="val1">港澳航运经营人</div>
                    <div class="val2">{{ animatedValues.gahys.toFixed(0) }}</div>
                    <div class="val3">
                      同比：{{ waterWayCompanyData.gahyTb }}%
                      <img src="../assets/images/big-screen/down-sanjiao.png" alt="" />
                    </div>
                  </div>
                  <div class="right-part-item">
                    <div class="val1">国际航运经营人</div>
                    <div class="val2">{{animatedValues.gjhys.toFixed(0) }}</div>
                    <div class="val3">
                      同比：{{ waterWayCompanyData.gjhyTb }}%
                      <img src="../assets/images/big-screen/down-sanjiao.png" alt="" />
                    </div>
                  </div>
                  <div class="right-part-item">
                    <div class="val1">港澳兼国内</div>
                    <div class="val2">{{ animatedValues.gajgns.toFixed(0)}}</div>
                    <div class="val3">
                      同比：{{ waterWayCompanyData.gajgnTb }}%
                      <img src="../assets/images/big-screen/down-sanjiao.png" alt="" />
                    </div>
                  </div>
                  <div class="right-part-item">
                    <div class="val1">国际兼国内</div>
                    <div class="val2">{{ animatedValues.gjjgns.toFixed(0) }}</div>
                    <div class="val3">
                      同比：{{ waterWayCompanyData.gjjgnTb }}%
                    </div>
                  </div>
                  <div class="right-part-item">
                    <div class="val1">国际兼港澳兼国内</div>
                    <div class="val2">{{animatedValues.gjjgajgns.toFixed(0) }}</div>
                    <div class="val3">
                      同比：{{ waterWayCompanyData.gjjgajgnTb }}%
                      <img src="../assets/images/big-screen/down-sanjiao.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="top1">
                <div class="tit">水运运力情况</div>

                <el-radio-group v-model="radio">
                  <el-radio-button label="客运船舶情况" value="客运船舶情况" />
                  <el-radio-button label="货运船舶情况" value="货运船舶情况" />
                </el-radio-group>
                <div class="shimmer-container">
                  <slot></slot>
                </div>
              </div>
              <div class="details" v-show="radio === '客运船舶情况'">
                <div class="val1">载重量(万吨)</div>
                <div class="val2">{{animatedValues.loadPassengers.toFixed(0)}}</div>
                <div class="val3">
                  同比：{{ waterCapacityData.loadPassengerTb }}%
                  <img src="../assets/images/big-screen/down-sanjiao.png" alt="" />
                </div>
              </div>
              <div class="details" v-show="radio === '货运船舶情况'">
                <div class="val1">载重量(万吨)</div>
                <div class="val2">{{animatedValues.loadGoods1?.toFixed(0)}}</div>
                <div class="val3">
                  同比：{{ waterCapacityData.loadGoodsTb }}%
                  <img src="../assets/images/big-screen/down-sanjiao.png" alt="" />
                </div>
              </div>
              <div id="fifth-chart" style="height: 220px; width: 500px" v-show="radio === '客运船舶情况'"></div>
              <div id="sixth-chart" style="height: 220px; width: 500px" v-show="radio === '货运船舶情况'"></div>
            </div>
            <div class="item" style="width: 68%; margin: 8px 28px 28px 0px">
              <div class="top">
                <div class="tit">水运运量情况</div>
                <div class="shimmer-container3">
                  <slot></slot>
                </div>
              </div>
              <div class="count-two">
                <div class="count-two-part">
                  <div class="title">客运量情况</div>
                  <div class="count-two-list">
                    <div class="count-two-item" style="width: 46%">
                      <div class="img-part">
                        <img src="../assets/images/big-screen/count-one-icon.png" alt="" />
                      </div>
                      <div class="count-part">
                        <div class="val1">水路客运量(万人)</div>
                        <div class="val2">
                          {{  animatedValues.waterPassenger1.toFixed(2) }}
                        </div>
                        <div class="val3">
                          累计量同比:{{
                            waterTransportData?.passenger?.waterPasgTb
                          }}%
                          <img src="../assets/images/big-screen/top-sanjiao.png" alt="" />
                        </div>
                      </div>
                    </div>
                    <div class="count-two-item" style="width: 54%">
                      <div class="img-part">
                        <img src="../assets/images/big-screen/count-two-icon.png" alt="" />
                      </div>
                      <div class="count-part">
                        <div class="val1">水路旅客周转量(万人公里)</div>
                        <div class="val2">
                          {{  animatedValues.waterPasgTrans1.toFixed(2)  }}
                        </div>
                        <div class="val3">
                          累计量同比:{{
                            waterTransportData?.passenger?.waterPasgTransTb
                          }}%
                          <img src="../assets/images/big-screen/top-sanjiao.png" alt="" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id="seventh-chart" style="height: 340px; width: 100%"></div>
                </div>
                <div class="count-two-part">
                  <div class="title">货运量情况</div>
                  <div class="count-two-list">
                    <div class="count-two-item" style="width: 46%">
                      <div class="img-part">
                        <img src="../assets/images/big-screen/count-three-icon.png" alt="" />
                      </div>
                      <div class="count-part">
                        <div class="val1">水路货运量(亿吨)</div>
                        <div class="val2">
                          {{  animatedValues.waterGoods1.toFixed(2) }}
                        </div>
                        <div class="val3">
                          累计量同比:{{
                            waterTransportData?.goods?.waterGoodsTb
                          }}%
                          <img src="../assets/images/big-screen/top-sanjiao.png" alt="" />
                        </div>
                      </div>
                    </div>
                    <div class="count-two-item" style="width: 56%">
                      <div class="img-part">
                        <img src="../assets/images/big-screen/count-four-icon.png" alt="" />
                      </div>
                      <div class="count-part">
                        <div class="val1">水路旅客周转量(亿吨公里)</div>
                        <div class="val2">
                          {{  animatedValues.waterGoodsTrans1.toFixed(2)}}
                        </div>
                        <div class="val3">
                          累计量同比:{{
                            waterTransportData?.goods?.waterGoodsTransTb
                          }}%
                          <img src="../assets/images/big-screen/top-sanjiao.png" alt="" />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id="eighth-chart" style="height: 340px; width: 100%"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item-content" style="height: 425px; margin: 0px 40px 40px 40px">
          <div class="item-title">数字港口</div>
          <div class="flex">
            <div class="item" style="width: 35%; margin: 8px 20px 28px 28px">
              <div class="top1" style="margin-bottom: 20px">
                <div class="tit">港口信息</div>
                <el-radio-group v-model="radio1">
                  <el-radio-button label="港口企业" value="港口企业" />
                  <!-- <el-radio-button label="港口机械设施" value="港口机械设施" /> -->
                  <el-radio-button label="泊位" value="泊位" />
                  <!-- <el-radio-button label="岸线使用情况" value="岸线使用情况" /> -->
                </el-radio-group>
                <div class="shimmer-container">
                  <slot></slot>
                </div>
              </div>
              <div class="tabs-content">
                <div style="display: flex" v-show="radio1 === '港口企业'">
                  <div id="ninth-chart" style="height: 340px; width: 50%"></div>
                  <div id="tenth-chart" style="height: 340px; width: 50%"></div>
                </div>
                <div v-show="radio1 === '港口机械设施'">
                  <div id="eleventh-chart" style="height: 340px; width: 500px"></div>
                </div>
                <div v-show="radio1 === '泊位'">
                  <div class="info-item">
                    <div class="left-info">
                      <div class="name">泊位(个)</div>
                      <div class="value">{{ berthLineData.newBerth }}</div>
                      <img src="../assets/images/big-screen/count-five.png" alt="" />
                    </div>
                    <div class="raight-info">
                      <div class="val-item">
                        <div class="val1">1-5万吨级</div>
                        <div class="val2">{{ berthLineData.tons15 }}</div>
                      </div>
                      <div class="val-item">
                        <div class="val1">5-10万吨级</div>
                        <div class="val2">{{ berthLineData.tons510 }}</div>
                      </div>
                      <div class="val-item">
                        <div class="val1">10万吨级以上</div>
                        <div class="val2">{{ berthLineData.tons10 }}</div>
                      </div>
                    </div>
                  </div>
                  <!-- <div class="info-item" style="margin: 8px 0px 16px 0px;">
                    <div class="left-info">
                      <div class="name">沿海泊位(个)</div>
                      <div class="value">{{ berthLineData.coastalBerth }}</div>
                      <img src="../assets/images/big-screen/count-five.png" alt="">
                    </div>
                    <div class="raight-info">
                      <div class="val-item">
                        <div class="val1">万吨级</div>
                        <div class="val2">{{ berthLineData.cTonW }}</div>
                      </div>
                      <div class="val-item">
                        <div class="val1">十万吨级</div>
                        <div class="val2">{{ berthLineData.cton10w }}</div>
                      </div>
                      <div class="val-item">
                        <div class="val1">三十万吨级</div>
                        <div class="val2">{{ berthLineData.cton30w }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="info-item">
                    <div class="left-info">
                      <div class="name">内河泊位(个)</div>
                      <div class="value">{{ berthLineData.inlandRiverBerth }}</div>
                      <img src="../assets/images/big-screen/count-six.png" alt="">
                    </div>
                    <div class="raight-info">
                      <div class="val-item">
                        <div class="val1">三千吨级</div>
                        <div class="val2">{{ berthLineData.irTon3000 }}</div>
                      </div>
                      <div class="val-item">
                        <div class="val1">五千吨级</div>
                        <div class="val2">{{ berthLineData.irTon5000 }}</div>
                      </div>
                    </div>
                  </div> -->
                </div>
                <div v-show="radio1 === '岸线使用情况'">
                  <div class="info-item" style="margin: 8px 0px 16px 0px">
                    <div class="left-info1">
                      <img src="../assets/images/big-screen/count-seven.png" alt="" />
                    </div>
                    <div class="raight-info1">
                      <div class="name">已利用岸线长度(千米)</div>
                      <div class="value">
                        {{ berthLineData.utilzedShoreline }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item" style="width: 65%; margin: 8px 28px 28px 0px">
              <div class="top">
                <div class="tit">港口吞吐情况</div>
                <el-radio-group v-model="radio2">
                  <el-radio-button label="货物吞吐情况" value="货物吞吐情况" />
                  <el-radio-button label="集装箱吞吐情况" value="集装箱吞吐情况" />
                </el-radio-group>
              </div>
              <div class="shimmer-container4">
                <slot></slot>
              </div>
              <div class="count-three" v-show="radio2 === '货物吞吐情况'">
                <div class="count-three-part" style="width: 35%">
                  <div class="title">货物吞吐情况</div>
                  <div class="count-three-info">
                    <div class="left-info">
                      <div class="value">{{ animatedValues.goodsNum1.toFixed(0) }}</div>
                      <div class="unit">(万吨)</div>
                      <img src="../assets/images/big-screen/base-other-bg.png" alt="" />
                      <div class="name">货物吞吐量</div>
                    </div>
                    <div class="right-info">
                      <div class="val-item">
                        <div class="name">外贸货物<br />(万吨)</div>
                        <div class="value">{{ animatedValues.wmGoods1.toFixed(0) }}</div>
                      </div>
                      <div class="val-item">
                        <div class="name">内贸货物<br />(万吨)</div>
                        <div class="value">{{  animatedValues.nmGoods1.toFixed(0) }}</div>
                      </div>
                      <div class="val-item">
                        <div class="name">沿海货物<br />(万吨)</div>
                        <div class="value">{{  animatedValues.yhGoods1.toFixed(0) }}</div>
                      </div>
                      <div class="val-item">
                        <div class="name">内河货物<br />(万吨)</div>
                        <div class="value">{{ animatedValues.nhGoods1.toFixed(0) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="count-three-part" style="width: 65%">
                  <div class="title">货物吞吐量趋势</div>
                  <div id="twelfth-chart" style="height: 270px; width: 100%"></div>
                </div>
              </div>
              <div class="count-three" v-show="radio2 === '集装箱吞吐情况'">
                <div class="count-three-part" style="width: 35%">
                  <div class="title">集装箱吞吐情况</div>
                  <div class="count-three-info">
                    <div class="left-info">
                      <div class="value">{{animatedValues.boxNum1.toFixed(0) }}</div>
                      <div class="unit">(万吨)</div>
                      <img src="../assets/images/big-screen/base-other-bg.png" alt="" />
                      <div class="name">集装箱吞吐量</div>
                    </div>
                    <div class="right-info1">
                      <div class="val-item">
                        <div class="name">外贸集装箱(万吨)</div>
                        <div class="value">{{animatedValues.wmBoxNum1.toFixed(0)}}</div>
                      </div>
                      <div class="val-item">
                        <div class="name">内贸集装箱(万吨)</div>
                        <div class="value">{{ animatedValues.nmBoxNum1.toFixed(0) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="count-three-part" style="width: 65%">
                  <div class="title">集装箱吞吐量趋势</div>
                  <div id="thirteenth-chart" style="height: 270px; width: 600px"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="my-iframe" v-if="isShow">
      <!-- <iframe src="http://210.76.76.41/digital-port/big-screen/main/#/QZHX?token=e49f977c-4203-464a-92d1-50de3c1f34a5" width="5760" height="1200"></iframe> -->
      <iframe
        src="https://210.76.81.180/traffic-channel/szgktymhkb/digital-port/big-screen/main/#/QZHX?token=10b4040ca79c4661b8ace01a203c516e"
        width="5760" height="1200"></iframe>
      <div class="close-btn" @click="isShow = false">返回</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

//引入Echarts
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  GraphicComponent,
} from "echarts/components";
import { PieChart, BarChart, LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  GraphicComponent,
  PieChart,
  BarChart,
  LineChart,
  CanvasRenderer,
]);
//引入接口
import {
  //航道概况
  getProvinceWaterwayData,
  provinceSit,
  getWaterwayTotalNum,
  getnhdjhdDetail,
  //航标总数
  beaconSituationDetail,
  rtuBeaconChart,
  getLicenceInfo,
} from "@/bridge-h5/utils/apis";
import {
  nhdjhdDetail,
  //桥梁信息
  getBgAndWy,
  bgDistribute,
  bgDbDistribute,
  getDepart,
  bgHighHole,
  //数字航运
  waterWayCompany,
  waterTransport,
  waterCapacity,
  //数字港口
  portCompany,
  portMachine,
  berthLine,
  goodsSit,
  //船舶概览
  shipSit,
} from "@/bridge-h5/utils/bridgeAreaControlApi";
import {
  //船闸信息
  screenMapData,
  newWater,
  goodsAnalysis,
  defAlySmall,
} from "@/bridge-h5/utils/myapi";

//地图
import OlArc from "../components/olArcLargeSizeScreen.vue";
const OlArcRef = ref(null);

import chartBg from "../assets/images/big-screen/chart-bg.png";
import { DArrowRight } from "@element-plus/icons-vue";

// 定义固定数值
const animatedValues = reactive({
  nmBoxNum1: 0,
  wmBoxNum1: 0,
  boxNum1: 0,
  waterGoodsTrans1: 0,
  waterGoods1: 0,
  waterPasgTrans1: 0,
  waterPassenger1: 0,
  yhGoods1: 0,
  nhGoods1: 0,
  nmGoods1: 0,
  wmGoods1: 0,
  goodsNum1: 0,
  totalMileage: 0,
  inlandWaterway: 0,
  highLevelMile: 0,
  cbN: 0,
  nor: 0,
  total: 0,
  bgHigh: 0,
  bgOther: 0,
  bgDabiaoHigh: 0,
  bgNoDabiao: 0,
  totalNums: 0,
  threes: 0,
  fours: 0,
  fives: 0,
  totalNums1: 0,
  fours1: 0,
  sixs1: 0,
  totalComs: 0,
  gnhys: 0,
  gjhys: 0,
  gahys: 0,
  gajgns: 0,
  gjjgns: 0,
  gjjgajgns: 0,
  loadPassengers: 0,
  loadGoods1: 0,
});
const waterWayData = ref({ mileageOfInlandWaterway: 0 });

// 缓动函数 - 二次缓出
const easeOutQuad = (t) => t * (2 - t);
const startAnimation = (targetValue, valueKey, duration = 2000) => {
  const startValue = animatedValues[valueKey];
  const changeValue = targetValue - startValue;
  const startTime = performance.now();

  const animate = (currentTime) => {
    const elapsedTime = currentTime - startTime;
    const progress = Math.min(elapsedTime / duration, 1);
    const easeProgress = easeOutQuad(progress);
    animatedValues[valueKey] = startValue + changeValue * easeProgress;

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  };

  requestAnimationFrame(animate);
};
//航道概况
const provinceWaterwayData = ref({});
const getProvinceWaterwayDataFn = () => {
  getProvinceWaterwayData().then((res) => {
    if (res.code === 200 && res.data.length) {
      provinceWaterwayData.value = res.data[0];
      startAnimation(provinceWaterwayData.value.totalMileageOfWaterwayProvince, 'totalMileage');
    }
  });
};
const getWaterwayTotalNumFn = () => {
  getWaterwayTotalNum().then((res) => {
    if (res.code === 200 && res.data) {
      waterWayData.value = res.data[0];
      startAnimation(waterWayData.value.mileageOfInlandWaterway, 'inlandWaterway');
    }
  });
};
const provinceSitData = ref({});
const provinceSitFn = () => {
  provinceSit().then((res) => {
    if (res.code === 200) {
      provinceSitData.value = res.data;
      startAnimation(provinceSitData.value.highLevelMile, 'highLevelMile');

    }
  });
};

const nhdjhdDetailData = ref([]);
const regionalCenter = ref([]);
const levelOne = ref([]);
const levelTwo = ref([]);

const getnhdjhdDetailFn = () => {
  nhdjhdDetail().then((res) => {
    if (res.code === 200 && res.data) {
      let resData = res.data;
      let obj = {};
      resData.forEach((el, index) => {
        regionalCenter.value.push(el.region);
        levelOne.value.push(el.highLevel);
        levelTwo.value.push(el.otherLevel);
      });
      resData.unshift(obj);
      nhdjhdDetailData.value = resData;

      initFirstChart();
    }
  });
};
const initFirstChart = () => {
  let firstChart = echarts.getInstanceByDom(
    document.getElementById("first-chart")
  );
  if (firstChart != null && firstChart != "" && firstChart != undefined) {
    firstChart.dispose();
  }
  firstChart = echarts.init(document.getElementById("first-chart"));
  let option;
  option = {
    tooltip: {
      // trigger: "axis",
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    legend: {
      itemWidth: 8, // 设置图例项的宽度
      itemHeight: 8, // 设置图例项的高度
      textStyle: {
        fontSize: "16px",
        color: "rgba(255,255,255,0.65)",
        lineHeight: 16,
      },
      itemGap: 6,
      // icon: "circle", //图例设置成圆形
    },
    grid: {
      top: "20%",
      left: "5%",
      right: "17%",
      bottom: "5%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        // maxValueSpan: 12,
        startValue: 0,
        endValue: 7,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        name: "区域\n中心",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
        },
        data: regionalCenter.value,
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        axisLabel: {
          interval: 0,
          color: "#FFFFFF",
          fontSize: "16px",
        },
        axisPointer: {
          show: true,
          type: "none",
          label: {
            show: false,
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "维护里程（km）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
        },
        nameGap: 15,
        axisLabel: {
          interval: 0,
          color: "rgba(255,255,255,0.65",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
    ],
    series: [
      {
        name: "一级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 8,
        //  color: "#78DFFF",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#78DFFF" }, // 顶部
          { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
        ]),
        data: levelOne.value,

      },
      {
        name: "二级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 8,
        // color: "#309CFF",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#309CFF" }, // 顶部
          { offset: 1, color: "rgba(80,87,253,0.2)" }, // 底部
        ]),
        data: levelOne.value,

      },
      {
        name: "三级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 8,
        // color: "#5057FD",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#5057FD" }, // 顶部
          { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
        ]),
        data: levelOne.value,
      },
      {
        name: "四级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 8,
        //  color: "#5AF5D5",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#5AF5D5" }, // 顶部
          { offset: 1, color: "rgba(90,245,213,0.2" }, // 底部
        ]),
        data: levelOne.value,

      },
      {
        name: "五级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 8,
        //  color: "#FFC733",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#FFC733" }, // 顶部
          { offset: 1, color: "rgba(255,199,51,0.2)" }, // 底部
        ]),
        data: levelOne.value,
      },
      {
        name: "六级",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#FE772A" }, // 顶部
          { offset: 1, color: "rgba(254,119,42,0.2)" }, // 底部
        ]),
        data: levelOne.value,
      },
      {
        name: "七级",
        type: "bar",
        label: {
          position: 'top',
          show: true,
          color: '#fffff'
        },
        emphasis: {
          focus: "series",
        },
        stack: "Ad",
        barWidth: 8,
        //  color: "#E33F3F",
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#E33F3F" }, // 顶部
          { offset: 1, color: "rgba(227,63,63,0.2)" }, // 底部
        ]),
        data: levelOne.value,
      },
    ],
  };

  option && firstChart.setOption(option);
};

//航标总数
const navigationMarkData = ref({});
const beaconSituationDetailFn = () => {
  beaconSituationDetail().then((res) => {
    if (res.code === 200 && res.data.length) {
      navigationMarkData.value = res.data[0];
    }
  });
};
const xAxisSecondData = ref([]);
const seriesSecondData = ref([]);
const rtuBeaconChartFn = () => {
  rtuBeaconChart().then((res) => {
    if (res.code === 200 && res.data.length) {
      res.data.forEach((item) => {
        xAxisSecondData.value.push(item.region);
        seriesSecondData.value.push(item.rtuBeacon);
      });
      initFourthChart();
    }
  });
};
const initFourthChart = () => {
  let secondChart = echarts.getInstanceByDom(
    document.getElementById("fourth-chart")
  );
  if (secondChart == null) {
    secondChart = echarts.init(document.getElementById("fourth-chart"));
  }
  let option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    grid: {
      top: "15%",
      left: "5%",
      right: "17%",
      bottom: "10%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: xAxisSecondData.value,
        name: "区域\n中心",
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
        },
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "航标数",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
          padding: [0, 30, 0, 0],
        },
        axisLabel: {
          color: "rgba(255,255,255,0.65)",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
    ],
    series: [

      {
        name: "遥测遥控航标数",
        data: seriesSecondData.value,
        type: "bar",
        barWidth: 8,
        label: {
          show: true,
          position: "top",
          color: "#FFFFFF",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#78DFFF" }, // 顶部
            { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
          ]),
        },
      },
    ],
  };

  option && secondChart.setOption(option);
};

//船舶概览
const shipRadio = ref("工作船概览");
const shipSitData = ref({});
const shipTypeRadio = ref("技术等级");
const shipSitFn = () => {
  shipSit().then((res) => {
    if (res.code === 200) {
      // shipSitData.value = res.data;
      shipSitData.value = res.data;
      startAnimation(shipSitData.value.cbNum, 'cbN');
      startAnimation(shipSitData.value.normal, 'nor');
      let colorData = [
        "#78DFFF",
        "#9AD4EF",
        "#309CFF",
        "#2B679D",
        "#5057FD",
        "#8083D8",
        "#5AF5D5",
        "#A6E7D9",
        "#55FE5C",
        "#9CDB9F",
        "#FFC733",
        "#FFE6A5",
        "#FE762A",
        "#F9B793",
        "#E33F3F",
        "#F48787",
        "#ED44F0",
        "#F5ABF6",
        "#41616A",
        "#ADCDD6",
      ];
      let levelData = [];
      res.data.jsLevel.forEach((item, index) => {
        levelData.push({
          name: res.data.jsLevelType[index],
          value: item,
          itemStyle: {
            color: colorData[index],
          },
        });
      });
      initFourteenthChart(levelData);
      let shipData = [];
      res.data.shipNum.forEach((item, index) => {
        shipData.push({
          name: res.data.shipType[index],
          value: item,
          itemStyle: {
            color: colorData[index],
          },
        });
      });
      initFifteenthChart(shipData);
      let xData = [];
      let sData = [];
      res.data.dishiShip.forEach((item) => {
        xData.push(item.cityName);
        sData.push(item.shipNum);
      });
      initSixteenthChart(xData, sData);
    }
  });
};
const initFourteenthChart = (levelData) => {
  nextTick(() => {
    let pieChart = echarts.getInstanceByDom(
      document.getElementById("fourteenth-chart")
    );
    if (pieChart != null && pieChart != "" && pieChart != undefined) {
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById("fourteenth-chart"));
    let option = {
      graphic: {
        type: "image",
        id: "background",
        left: 120,
        top: 20,
        z: -10, // 确保背景图在底层
        bounding: "raw",
        origin: [200, 200], // 图片的中心位置
        style: {
          image: chartBg, // 背景图片的URL
          width: 260, // 背景图片的宽度
          height: 260, // 背景图片的高度
        },
      },
      legend: [
        {
          type: "scroll",
          bottom: "10%",
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            fontSize: "16px",
            color: "rgba(255,255,255,0.85)",
          },
          pageIconColor: "#FFFFFF",
          pageIconInactiveColor: "#2f4554",
          pageTextStyle: {
            color: "#FFFFFF",
          },
        }
      ],
      tooltip: {
        trigger: "item",
        confine: true, //限制在图表区域内
      },
      series: [
        {
          type: "pie",
          radius: ["49%", "60%"],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
          },
          labelLine: {
            show: true, //标签连接线
          },
          data: levelData,
        },
      ],
    };
    option && pieChart.setOption(option);
  });
};
const initFifteenthChart = (shipData) => {
  nextTick(() => {
    let pieChart = echarts.getInstanceByDom(
      document.getElementById("fifteenth-chart")
    );
    if (pieChart != null && pieChart != "" && pieChart != undefined) {
      pieChart.dispose();
    }
    pieChart = echarts.init(document.getElementById("fifteenth-chart"));
    let option = {
      graphic: {
        type: "image",
        id: "background",
        left: 120,
        top: 20,
        z: -10, // 确保背景图在底层
        bounding: "raw",
        origin: [200, 200], // 图片的中心位置
        style: {
          image: chartBg, // 背景图片的URL
          width: 260, // 背景图片的宽度
          height: 260, // 背景图片的高度
        },
      },
      legend: [
        {
          type: "scroll",
          itemWidth: 8,
          itemHeight: 8,
          bottom: -6,
          textStyle: {
            fontSize: "16px",
            color: "rgba(255,255,255,0.85)",
          },
          pageIconColor: "#FFFFFF", // 翻页按钮的颜色
          pageIconInactiveColor: "#2f4554", // 翻页按钮不激活时（即翻页到头时）的颜色
          pageTextStyle: {
            // 图例页信息的文字样式
            color: "#FFFFFF",
          },
        },
        {
          type: "scroll",
          itemWidth: 8,
          itemHeight: 8,
          bottom: 50,
          textStyle: {
            fontSize: "16px",
            color: "rgba(255,255,255,0.85)",
          },
          pageIconColor: "#FFFFFF",
          pageIconInactiveColor: "#2f4554",
          pageTextStyle: {
            color: "#FFFFFF",
          },
        },
        {
          type: "scroll",
          itemWidth: 8,
          itemHeight: 8,
          bottom: 100,
          textStyle: {
            fontSize: "16px",
            color: "rgba(255,255,255,0.85)",
          },
          pageIconColor: "#FFFFFF",
          pageIconInactiveColor: "#2f4554",
          pageTextStyle: {
            color: "#FFFFFF",
          },
        }
      ],
      tooltip: {
        trigger: "item",
        confine: true, //限制在图表区域内
      },
      series: [
        {
          type: "pie",
          radius: ["50%", "60%"],
          center: ['50%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
          },
          labelLine: {
            show: true, //标签连接线
          },
          data: shipData,
        },
      ],
    };
    option && pieChart.setOption(option);
  });
};
const initSixteenthChart = (xData, sData) => {
  nextTick(() => {
    let sixteenthChart = echarts.getInstanceByDom(
      document.getElementById("sixteenth-chart")
    );
    if (sixteenthChart == null) {
      sixteenthChart = echarts.init(document.getElementById("sixteenth-chart"));
    }
    var option;
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        confine: true, //限制在图表区域内
      },
      grid: {
        top: "10%",
        left: "5%",
        right: "17%",
        bottom: "5%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          // maxValueSpan: 10,
          // startValue: 0,
          // endValue: 7,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          data: xData,
          name: "区域\n中心",
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "rgba(255,255,255,0.65)",
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "单位：艘",
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "rgba(255,255,255,0.65)",
            padding: [0, 50, 0, 0],
          },
          nameGap: 15,
          axisLabel: {
            color: "rgba(255,255,255,0.65)",
            fontSize: "16px",
          },
          splitLine: {
            show: true,
            lineStyle: {
              // type:'dashed',
              color: "rgba(255,255,255,0.2)",
            },
          },
        },
      ],
      series: [
        {
          name: "船舶数量",
          data: sData,
          type: "bar",
          barWidth: 8,
          label: {
            show: true,
            position: "top",
            color: "#FFFFFF",
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#78DFFF" }, // 顶部
              { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
            ]),
          },
        },
      ],
    };
    option && sixteenthChart.setOption(option);
  });
};
//桥梁信息
const bgAndWyData = ref({});
const getBgAndWyFn = () => {
  getBgAndWy().then((res) => {
    if (res.code === 200 && res.data) {
      bgAndWyData.value = res.data;
      startAnimation(bgAndWyData.value.totalBridge, 'total');
      startAnimation(bgAndWyData.value.bgHighLevel, 'bgHigh');
      startAnimation(bgAndWyData.value.bgOtherLevel, 'bgOther');
      startAnimation(bgAndWyData.value.bgDabiaoHighLevel, 'bgDabiaoHigh');
      startAnimation(bgAndWyData.value.bgNoDabiaoHighLevel, 'bgNoDabiao');
    }
  });
};
const bgDbDistributeData = ref([]);
const bgDbDistributeFn = () => {
  bgDbDistribute().then((res) => {
    if (res.code === 200) {
      bgDbDistributeData.value = res.data;
    }
  });
};
const depart = ref("");
const departData = ref([]);
const getDepartFn = () => {
  getDepart().then((res) => {
    if (res.code === 200) {
      // depart.value = res.data[0].name;
      depart.value = "广州";
      departData.value = res.data;
      bgHighHoleFn();
    }
  });
};
const departChange = () => {
  bgHighHoleFn();
};
const bgHighHoleData = ref([]);
const bgHighHoleFn = () => {
  bgHighHole({
    bmPname: depart.value,
  }).then((res) => {
    if (res.code === 200) {
      bgHighHoleData.value = res.data;
    }
  });
};

const timer = ref(null);
const myTable = ref(null);
const clearScroll = () => {
  clearInterval(timer.value);
  timer.value = null;
};
const createScroll = () => {
  clearScroll();
  // 拿到 table0
  const table = myTable.value.layout.table.refs;
  // 拿到可以滚动的元素
  nextTick(() => {
    // const tableWrapper = myTable.value.$refs.bodyWrapper;
    const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild;
    // 这个
    timer.value = setInterval(() => {
      tableWrapper.scrollTop += 1; // 每次滚动1px

      // 更可靠的底部检测（带容差）
      if (Math.abs(
        tableWrapper.scrollTop + tableWrapper.clientHeight - tableWrapper.scrollHeight
      ) < 5) {
        // 平滑回到顶部
        tableWrapper.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      }
    }, 100);
  })
};


const timers = ref(null);
const myTables = ref(null);
const clearScrolls = () => {
  clearInterval(timers.value);
  timers.value = null;
};
const createScrolls = () => {
  clearScroll();
  // 拿到 table
  // const table = myTables.value.layout.table.refs;
  // 拿到可以滚动的元素
  // const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild;
  const tableWrapper = myTables.value;

  timers.value = setInterval(() => {
    tableWrapper.scrollTop += 1;
    // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
    if (
      tableWrapper.clientHeight + tableWrapper.scrollTop ==
      tableWrapper.scrollHeight
    ) {
      tableWrapper.scrollTop = 0;
    }
  }, 100);
};


const bgDistributexAxisData = ref([]);
const bgDistributeseriesData = ref([]);
const bgDistributeFn = () => {
  bgDistribute().then((res) => {
    if (res.code === 200 && res.data) {
      res.data.forEach((item) => {
        bgDistributexAxisData.value.push(item.region);
        bgDistributeseriesData.value.push({
          value: item.num,
          itemStyle: {
            color: "#78DFFF",
          },
        });
      });
      // initSecondChart();
    }
  });
};
// const initSecondChart = () => {
//   nextTick(() => {
//     let barChart = echarts.getInstanceByDom(document.getElementById("second-chart"));
//     if(barChart != null && barChart != "" && barChart != undefined){
//       barChart.dispose();
//     }
//     barChart = echarts.init(document.getElementById('second-chart'));
//     let option;
//     option = {
//       tooltip: {
//         trigger: 'axis',
//         confine: true, //限制在图表区域内
//         // formatter: function (params) {
//         //   let template = `${params[0].axisValue}<br>`;
//         //   for(let i = 0; i < params.length; i++){
//         //     let item = params[i];
//         //     template += item.marker + ' ' + item.data.value + ' 次' + '<br>'
//         //   }
//         //   return template
//         // },
//       },
//       legend: {},
//       grid: {
//         top: '40px',
//         left: '60px',
//         right: '80px',
//         bottom: '40px',
//       },
//       dataZoom: [
//         {
//           show: false,
//           type: "inside",
//           zoomLock: false,
//         },
//       ],
//       xAxis: {
//         type: 'category',
//         name: "区域中心",
//         nameTextStyle: {
//           fontWeight: "500",
//           fontSize: "16px",
//           color: "#FFFFFF",
//         },
//         axisLabel: {
//           // rotate: 60,
//           color: "#FFFFFF",
//           fontSize: "16px",
//         },
//         data: bgDistributexAxisData.value,
//       },
//       yAxis: {
//         type: 'value',
//         name: '桥梁数量（座）',
//         nameTextStyle: {
//           fontWeight: "500",
//           fontSize: "16px",
//           color: "#FFFFFF",
//         },
//         axisLabel: {
//           color: "#FFFFFF",
//           fontSize: "16px",
//         },
//         splitLine: {
//           show: true,
//           lineStyle:{
//             // type:'dashed',
//             color: 'rgba(255,255,255,0.2)'
//           }
//         }
//       },
//       series: [
//         {
//           type: 'bar',
//           barWidth: "15%",
//           // showBackground: true,
//           data: bgDistributeseriesData.value
//         }
//       ]
//     };

//     option && barChart.setOption(option);
//   });
// };

//船闸信息
const beijiangData = ref({});
const lianjiangData = ref({});
const countDataFn = () => {
  screenMapData().then((res) => {
    if (res.code === 200) {
      beijiangData.value = res.data[0].beijiang;
      lianjiangData.value = res.data[0].lianjiang;
      startAnimation(beijiangData.value.totalNum, 'totalNums');
      startAnimation(beijiangData.value.three, 'threes');
      startAnimation(beijiangData.value.four, 'fours');
      startAnimation(beijiangData.value.five, 'fives');
      startAnimation(lianjiangData.value.totalNum, 'totalNums1');
      startAnimation(lianjiangData.value.four, 'fours1');
      startAnimation(lianjiangData.value.six, 'sixs1');
    }
  });
};
const newWaterFunctin = () => {
  nextTick(() => {
    newWater().then((res) => {
      if (res.code === 200) {
        let xAxisData = [];
        let seriesData = [];
        res.data.forEach((item) => {
          xAxisData.push(item.name);
          seriesData.push(item.waterLevel);
        });
        let lineChart = echarts.getInstanceByDom(
          document.getElementById("third-chart")
        );
        if (lineChart != null && lineChart != "" && lineChart != undefined) {
          lineChart.dispose();
        }
        lineChart = echarts.init(document.getElementById("third-chart"));

        let option;
        option = {
          tooltip: {
            trigger: "axis",
            confine: true, //限制在图表区域内
            formatter: function (params) {
              let template = `${params[0].axisValue}<br>`;
              for (let i = 0; i < params?.length; i++) {
                let item = params[i];
                template +=
                  item.marker + "水位值: " + item.value + "m" + "<br>";
              }
              return template;
            },
          },
          grid: {
            top: "40px",
            left: "40px",
            right: "15px",
            bottom: "40px",
          },
          dataZoom: [
            {
              show: false,
              type: "inside",
              // maxValueSpan: 8,
              // startValue: 0,
              // endValue: 6,
              zoomLock: false,
            },
          ],
          xAxis: {
            type: "category",
            axisLabel: {
              // rotate: 60,
              color: "#FFFFFF",
              fontSize: "16px",
            },
            data: xAxisData,
          },
          yAxis: {
            type: "value",
            name: "水位（m）",
            nameTextStyle: {
              fontWeight: "500",
              fontSize: "16px",
              color: "#FFFFFF",
            },
            axisLabel: {
              color: "#FFFFFF",
              fontSize: "16px",
            },
            splitLine: {
              show: true,
              lineStyle: {
                // type:'dashed',
                color: "rgba(255,255,255,0.2)",
              },
            },
          },
          series: [
            {
              data: seriesData,
              type: "line",
              itemStyle: {
                color: "#78DFFF",
              },
            },
          ],
        };
        option && lineChart.setOption(option);
      }
    });
  });
};
//过闸船舶货物类型统计分析
const initPieChart = () => {
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth();
  if (month == 0) {
    year = year - 1;
    month = 12;
  }
  if (month < 10) {
    month = "0" + month;
  }
  nextTick(() => {
    goodsAnalysis("", `${year}-${month}-01`, `${year}-${month}-31`).then(
      (res) => {
        if (res.code === 200) {
          let seriesData = [];
          let colorData = [
            "#78DFFF",
            "#9AD4EF",
            "#309CFF",
            "#2B679D",
            "#5057FD",
            "#8083D8",
            "#5AF5D5",
            "#A6E7D9",
            "#55FE5C",
            "#9CDB9F",
            "#FFC733",
            "#FFE6A5",
            "#FE762A",
            "#F9B793",
            "#E33F3F",
            "#F48787",
            "#ED44F0",
            "#F5ABF6",
            "#41616A",
            "#ADCDD6",
          ];
          res.data.forEach((item, index) => {
            let obj = {
              name: item.cargoType,
              value: item.rate,
              load: item.load,
              itemStyle: {
                color: colorData[index],
              },
            };
            seriesData.push(obj);

          });
          let pieChart = echarts.getInstanceByDom(
            document.getElementById("third-chart")
          );
          if (pieChart != null && pieChart != "" && pieChart != undefined) {
            pieChart.dispose();
          }
          pieChart = echarts.init(document.getElementById("third-chart"));

          // 清除之前的定时器（如果存在）
          if (window.legendScrollTimer) {
            clearInterval(window.legendScrollTimer);
          }

          let option = {
            graphic: {
              type: "image",
              id: "background",
              left: 10,
              top: 23,
              z: -10, // 确保背景图在底层
              bounding: "raw",
              origin: [200, 200], // 图片的中心位置
              style: {
                image: chartBg, // 背景图片的URL
                width: 212, // 背景图片的宽度
                height: 212, // 背景图片的高度
              },
            },
            legend: [
              {
                type: "scroll",
                itemWidth: 8,
                itemHeight: 8,
                orient: 'vertical',
                right: '0%',
                top: '0%',
                textStyle: {
                  fontSize: "16px",
                  color: "#FFFFFF",
                },
                pageIconColor: "#FFFFFF",
                pageIconInactiveColor: "#2f4554",
                pageTextStyle: {
                  color: "#FFFFFF",
                },
                animation: true,
                pageButtonItemGap: 5,
                pageButtonGap: 5,
                pageButtonPosition: 'end',
                scrollDataIndex: 0,
                pageFormatter: '{current}/{total}',
              }
            ],
            tooltip: {
              trigger: "item",
              confine: true, //限制在图表区域内
              formatter: function (params) {
                return (
                  params.marker +
                  params.data.name +
                  ": " +
                  params.data.load +
                  "吨，占比：" +
                  params.data.value +
                  "%"
                );
              },
            },
            series: [
              {
                type: "pie",
                radius: ['38%', '45%'], // 设置内外半径，缩小环形
                center: ['33%', '39%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                },
                labelLine: {
                  show: true, //标签连接线
                },
                data: seriesData,
              },
            ],
          };
          option && pieChart.setOption(option);

          // 设置图例自动循环滚动
          let legendData = option.series[0].data;
          let currentIndex = 0;
          let direction = 1; // 1表示向下滚动，-1表示向上滚动

          window.legendScrollTimer = setInterval(() => {
            if (pieChart && pieChart.getOption()) {
              // 更新索引
              currentIndex += direction;

              // 处理边界情况，实现来回滚动
              if (currentIndex >= legendData.length - 1) {
                direction = -1; // 到底部时向上滚动
              } else if (currentIndex <= 0) {
                direction = 1;  // 到顶部时向下滚动
              }

              // 应用滚动
              pieChart.dispatchAction({
                type: 'legendScroll',
                scrollDataIndex: currentIndex
              });

              // 高亮当前项
              pieChart.dispatchAction({
                type: 'legendSelect',
                name: legendData[currentIndex].name
              });
            }
          }, 2000);
        }
      }
    );
  });
};
const deformationData = ref([]);
const deformationAlysFn = () => {
  defAlySmall().then((res) => {
    if (res.code === 200 && res.data.length) {
      deformationData.value = res.data;
    }
  });
};

//数字航运
const waterWayCompanyData = ref({});
const waterWayCompanyFn = () => {
  waterWayCompany().then((res) => {
    if (res.code === 200) {
      waterWayCompanyData.value = res.data;
      startAnimation(waterWayCompanyData.value.totalCom, 'totalComs');
      startAnimation(waterWayCompanyData.value.gnhy, 'gnhys');
      startAnimation(waterWayCompanyData.value.gahy, 'gahys');
      startAnimation(waterWayCompanyData.value.gjhy, 'gjhys');
      startAnimation(waterWayCompanyData.value.gajgn, 'gajgns');
      startAnimation(waterWayCompanyData.value.gjjgn, 'gjjgns');
      startAnimation(waterWayCompanyData.value.gjjgajgn, 'gjjgajgns');

    }
  });
};
const waterTransportData = ref({});
const xAxisData = ref([]);
const seriesData1 = ref([]);
const seriesData2 = ref([]);
const waterTransportFn = () => {
  waterTransport().then((res) => {
    if (res.code === 200) {
      waterTransportData.value = res.data;
      startAnimation(waterTransportData.value.goods?.waterGoodsTrans, 'waterGoodsTrans1');
      startAnimation(waterTransportData.value.goods?.waterGoods, 'waterGoods1');
      startAnimation(waterTransportData.value.passenger?.waterPasgTrans, 'waterPasgTrans1');
      startAnimation(waterTransportData.value.passenger?.waterPassenger, 'waterPassenger1');
      let arr1 = [];
      let arr2 = [];
      let arr3 = [];
      let arr4 = [];
      res.data.list.forEach((item) => {
        xAxisData.value.push(item.name);
        arr1.push(item.slkyl);
        arr2.push(item.slkyzzl);
        arr3.push(item.slhyl);
        arr4.push(item.slhyzzl);
      });
      seriesData1.value = [
        {
          name: "客运量合计",
          type: "bar",
          barWidth: "8",
          label: {
            position: 'top',
            color: "#fffff",
            show: true
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#78DFFF" }, // 顶部
              { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
            ]),
          },

          data: arr1,
        },
        {
          name: "旅客周转量",
          type: "line",
          yAxisIndex: 1,
          itemStyle: {
            color: "#FFC733",
          },
          data: arr2,
        },
      ];
      seriesData2.value = [
        {
          name: "货运量合计",
          type: "bar",
          label: {
            position: 'top',
            color: "#fffff",
            show: true
          },
          barWidth: 8,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#78DFFF" }, // 顶部
              { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
            ]),
          },
          data: arr3,
        },
        {
          name: "货物周转量",
          type: "line",
          yAxisIndex: 1,
          itemStyle: {
            color: "#FFC733",
          },
          data: arr4,
        },
      ];
      initSeventhChart();
      initEighthChart();
    }
  });
};
const initSeventhChart = () => {
  nextTick(() => {
    let seventhChart = echarts.getInstanceByDom(
      document.getElementById("seventh-chart")
    );
    if (
      seventhChart != null &&
      seventhChart != "" &&
      seventhChart != undefined
    ) {
      seventhChart.dispose();
    }
    seventhChart = echarts.init(document.getElementById("seventh-chart"));
    let option;
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
        confine: true, //限制在图表区域内
      },
      legend: {
        itemWidth: 8,
        itemHeight: 8,
        icon: 'rect',
        textStyle: {
          fontSize: "16px",
          color: "#FFFFFF",
        },
        itemGap: 4,
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "5%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          maxValueSpan: 30,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          data: xAxisData.value,
          axisPointer: {
            type: "shadow",
          },
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "客运量合计（万人）",
          label: {
            position: 'top',
            color: "#fffff",
            show: true
          },
          nameTextStyle: {
            padding: [0, 0, 0, 40],
            fontWeight: "400",
            fontSize: "16px",
            color: "rgba(255,255,255,0.65)",
          },

          axisLabel: {
            color: "rgba(255,255,255,0.65)",
            fontSize: "16px",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
        },
        {
          type: "value",
          name: "旅客周转量（万人公里）",
          axisLabel: {
            color: "rgba(255,255,255,0.65)",
            fontSize: "16px",
          },
          nameTextStyle: {
            padding: [0, 0, 0, 10],
            fontWeight: "400",
            fontSize: "16px",
            // lineHeight: "20",
            color: "rgba(255,255,255,0.65)",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
        },
      ],
      series: seriesData1.value,
    };
    option && seventhChart.setOption(option);
  });
};
const initEighthChart = () => {
  nextTick(() => {
    let eighthChart = echarts.getInstanceByDom(
      document.getElementById("eighth-chart")
    );
    if (eighthChart != null && eighthChart != "" && eighthChart != undefined) {
      eighthChart.dispose();
    }
    eighthChart = echarts.init(document.getElementById("eighth-chart"));
    let option;
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
        confine: true, //限制在图表区域内
      },
      legend: {
        itemWidth: 8,
        itemHeight: 8,
        icon: 'rect',
        textStyle: {
          fontSize: "16px",
          color: "#FFFFFF",
        },
        itemGap: 4,
      },
      grid: {
        left: "5%",
        right: "5%",
        bottom: "5%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          maxValueSpan: 30,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          data: xAxisData.value,
          axisPointer: {
            type: "shadow",
          },
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "货运量合计（亿吨）",
          nameTextStyle: {
            padding: [0, 0, 0, 40],
            fontWeight: "500",
            fontSize: "16px",
            color: "rgba(255,255,255,0.65)",
          },
          label: {
            position: 'top',
            color: "#fffff",
            show: true
          },
          axisLabel: {
            color: "rgba(255,255,255,0.65)",
            fontSize: "16px",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
        },
        {
          type: "value",
          name: "货物周转量（亿吨公里）",
          axisLabel: {
            color: "rgba(255,255,255,0.65)",
            fontSize: "16px",
          },
          nameTextStyle: {
            padding: [0, 20, 0, 0],
            fontWeight: "500",
            fontSize: "16px",
            color: "rgba(255,255,255,0.65)",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
        },
      ],
      series: seriesData2.value,
    };
    option && eighthChart.setOption(option);
  });
};
const radio = ref("客运船舶情况");
const waterCapacityData = ref({});
const waterCapacityFn = () => {
  waterCapacity().then((res) => {
    if (res.code === 200) {
      waterCapacityData.value = res.data;
      startAnimation(waterCapacityData.value.loadPassenger, 'loadPassengers');
      startAnimation(waterCapacityData.value.loadGoods, 'loadGoods1');
      initFifthChart();
      initSixthChart();
    }
  });
};
const initFifthChart = () => {
  nextTick(() => {
    let barChart = echarts.getInstanceByDom(
      document.getElementById("fifth-chart")
    );
    if (barChart != null && barChart != "" && barChart != undefined) {
      barChart.dispose();
    }
    barChart = echarts.init(document.getElementById("fifth-chart"));
    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      legend: {},
      grid: {
        top: "40px",
        left: "60px",
        right: "10px",
        bottom: "40px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        },
        data: waterCapacityData.value.passagerShipName,
      },
      yAxis: {
        type: "value",
        name: "船舶数量（座）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
        },
        axisLabel: {
          color: "rgba(255,255,255,0.65)",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
      series: [
        {
          type: "bar",
          barWidth: 8,
          label: {
            show: true,
            position: "top",
            color: "#FFFFFF",
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#78DFFF" }, // 顶部
              { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
            ]),
          },
          data: waterCapacityData.value.passagerShip,
        },
      ],
    };

    option && barChart.setOption(option);
  });
};
const initSixthChart = () => {
  nextTick(() => {
    let barChart = echarts.getInstanceByDom(
      document.getElementById("sixth-chart")
    );
    if (barChart != null && barChart != "" && barChart != undefined) {
      barChart.dispose();
    }
    barChart = echarts.init(document.getElementById("sixth-chart"));
    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      legend: {},
      grid: {
        top: "40px",
        left: "60px",
        right: "10px",
        bottom: "40px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: {
          color: "rgba(255,255,255,0.65)",
          fontSize: "16px",
        },
        data: waterCapacityData.value.goodsShipName,
      },
      yAxis: {
        type: "value",
        name: "船舶数量（座）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
        },
        axisLabel: {
          color: "rgba(255,255,255,0.65)",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
      series: [
        {
          type: "bar",
          barWidth: "10%",
          label: {
            show: true,
            position: "top",
            color: "#FFFFFF",
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#78DFFF" }, // 顶部
              { offset: 1, color: "rgba(120,223,255,0.2)" }, // 底部
            ]),
          },
          data: waterCapacityData.value.goodsShip,
        },
      ],
    };

    option && barChart.setOption(option);
  });
};
//数字港口
const radio1 = ref("港口企业");
const seriesData3 = ref([]);
const seriesData4 = ref([]);
const portCompanyFn = () => {
  portCompany().then((res) => {
    if (res.code === 200) {
      let colorData = [
        "#78DFFF",
        "#9AD4EF",
        "#309CFF",
        "#2B679D",
        "#5057FD",
        "#8083D8",
        "#5AF5D5",
        "#A6E7D9",
        "#55FE5C",
        "#9CDB9F",
        "#FFC733",
        "#FFE6A5",
        "#FE762A",
        "#F9B793",
        "#E33F3F",
        "#F48787",
        "#ED44F0",
        "#F5ABF6",
        "#41616A",
        "#ADCDD6",
      ];
      res.data.type1.forEach((item, index) => {
        seriesData3.value.push({
          value: item,
          name: res.data.type1Name[index],
          itemStyle: {
            color: colorData[index],
          },
        });
      });
      res.data.type2.forEach((item, index) => {
        seriesData4.value.push({
          value: item,
          name: res.data.type2Name[index],
          itemStyle: {
            color: colorData[index],
          },
        });
      });
      initNinthChart();
      initTenthChart();
    }
  });
};
const initNinthChart = () => {
  let pieChart = echarts.getInstanceByDom(
    document.getElementById("ninth-chart")
  );
  if (pieChart != null && pieChart != "" && pieChart != undefined) {
    pieChart.dispose();
  }
  pieChart = echarts.init(document.getElementById("ninth-chart"));
  let option;
  option = {
    graphic: {
      type: "image",
      id: "background",
      left: 20,
      top: -12,
      z: -10, // 确保背景图在底层
      bounding: "raw",
      origin: [200, 200], // 图片的中心位置
      style: {
        image: chartBg, // 背景图片的URL
        width: 220, // 背景图片的宽度
        height: 220, // 背景图片的高度
      },
    },
    tooltip: {
      trigger: "item",
      confine: true, //限制在图表区域内
      // formatter: function (params) {
      //   return params.marker + params.data.name + ': ' + params.data.load + '吨，占比：' + params.data.value + '%'
      // },
    },
    legend: {
      // type: "scroll",
      itemWidth: 8,
      itemHeight: 8,
      bottom: 90,
      textStyle: {
        fontSize: "16px",
        color: "#FFFFFF",
      },
      pageIconColor: "#FFFFFF", // 翻页按钮的颜色
      pageIconInactiveColor: "#2f4554", // 翻页按钮不激活时（即翻页到头时）的颜色
      pageTextStyle: {
        // 图例页信息的文字样式
        color: "#FFFFFF",
      },
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "58%"],
        center: ["49%", "29%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: true, //标签连接线
        },
        data: seriesData3.value,
      },
    ],
  };
  option && pieChart.setOption(option);
};
const initTenthChart = () => {
  let pieChart = echarts.getInstanceByDom(
    document.getElementById("tenth-chart")
  );
  if (pieChart != null && pieChart != "" && pieChart != undefined) {
    pieChart.dispose();
  }
  pieChart = echarts.init(document.getElementById("tenth-chart"));
  let option;
  option = {
    graphic: {
      type: "image",
      id: "background",
      left: 20,
      top: -12,
      z: -10, // 确保背景图在底层
      bounding: "raw",
      origin: [200, 200], // 图片的中心位置
      style: {
        image: chartBg, // 背景图片的URL
        width: 220, // 背景图片的宽度
        height: 220, // 背景图片的高度
      },
    },
    tooltip: {
      trigger: "item",
      confine: true, //限制在图表区域内
      // formatter: function (params) {
      //   return params.marker + params.data.name + ': ' + params.data.load + '吨，占比：' + params.data.value + '%'
      // },
    },
    legend: {
      // type: "scroll",
      itemWidth: 8,
      itemHeight: 8,
      bottom: 40,
      textStyle: {
        fontSize: "16px",
        color: "#FFFFFF",
      },
      pageIconColor: "#FFFFFF", // 翻页按钮的颜色
      pageIconInactiveColor: "#2f4554", // 翻页按钮不激活时（即翻页到头时）的颜色
      pageTextStyle: {
        // 图例页信息的文字样式
        color: "#FFFFFF",
      },
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "58%"],
        center: ["49%", "29%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: true, //标签连接线
        },
        data: seriesData4.value,
      },
    ],
  };
  option && pieChart.setOption(option);
};
const portMachineFn = () => {
  portMachine().then((res) => {
    if (res.code === 200) {
      let seriesData = [];
      let colorData = [
        "#78DFFF",
        "#9AD4EF",
        "#309CFF",
        "#2B679D",
        "#5057FD",
        "#8083D8",
        "#5AF5D5",
        "#A6E7D9",
        "#55FE5C",
        "#9CDB9F",
        "#FFC733",
        "#FFE6A5",
        "#FE762A",
        "#F9B793",
        "#E33F3F",
        "#F48787",
        "#ED44F0",
        "#F5ABF6",
        "#41616A",
        "#ADCDD6",
      ];
      res.data.list.forEach((item, index) => {
        seriesData.push({
          value: item,
          name: res.data.name[index],
          itemStyle: {
            color: colorData[index],
          },
        });
      });
      nextTick(() => {
        let pieChart = echarts.getInstanceByDom(
          document.getElementById("eleventh-chart")
        );
        if (pieChart != null && pieChart != "" && pieChart != undefined) {
          pieChart.dispose();
        }
        pieChart = echarts.init(document.getElementById("eleventh-chart"));
        let option;
        option = {
          graphic: {
            type: "image",
            id: "background",
            left: 100,
            top: 20,
            z: -10, // 确保背景图在底层
            bounding: "raw",
            origin: [200, 200], // 图片的中心位置
            style: {
              image: chartBg, // 背景图片的URL
              width: 300, // 背景图片的宽度
              height: 300, // 背景图片的高度
            },
          },
          tooltip: {
            trigger: "item",
            confine: true, //限制在图表区域内
            // formatter: function (params) {
            //   return params.marker + params.data.name + ': ' + params.data.load + '吨，占比：' + params.data.value + '%'
            // },
          },
          legend: {
            type: "scroll",
            itemWidth: 8,
            itemHeight: 8,
            textStyle: {
              fontSize: "16px",
              color: "#FFFFFF",
            },
            pageIconColor: "#FFFFFF", // 翻页按钮的颜色
            pageIconInactiveColor: "#2f4554", // 翻页按钮不激活时（即翻页到头时）的颜色
            pageTextStyle: {
              // 图例页信息的文字样式
              color: "#FFFFFF",
            },
          },
          series: [
            {
              type: "pie",
              radius: ["60%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
              },
              labelLine: {
                show: true, //标签连接线
              },
              data: seriesData,
            },
          ],
        };
        option && pieChart.setOption(option);
      });
    }
  });
};
const berthLineData = ref({});
const berthLineFn = () => {
  berthLine().then((res) => {
    berthLineData.value = res.data;
  });
};
const radio2 = ref("货物吞吐情况");
const goodsSitData = ref({});
const xAxisData1 = ref([]);
const xAxisData2 = ref([]);
const seriesData5 = ref([]);
const seriesData6 = ref([]);
const goodsSitFn = () => {
  goodsSit().then((res) => {
    if (res.code === 200) {
      goodsSitData.value = res.data;
      startAnimation(goodsSitData.value.goodsNum, 'goodsNum1');
      startAnimation(goodsSitData.value.wmGoods, 'wmGoods1');
      startAnimation(goodsSitData.value.nmGoods, 'nmGoods1');
      startAnimation(goodsSitData.value.nhGoods, 'nhGoods1');
      startAnimation(goodsSitData.value.yhGoods, 'yhGoods1');
      startAnimation(goodsSitData.value.nmBoxNum, 'nmBoxNum1');
      startAnimation(goodsSitData.value.wmBoxNum, 'wmBoxNum1');
      startAnimation(goodsSitData.value.boxNum, 'boxNum1');

      res.data.goodsList.forEach((item) => {
        xAxisData1.value.push(item.time);
        seriesData5.value.push(item.throughput);
      });
      res.data.boxList.forEach((item) => {
        xAxisData2.value.push(item.time);
        seriesData6.value.push(item.throughput);
      });
      initTwelfthChart();
      initThirteenthChart();
    }
  });
};
const initTwelfthChart = () => {
  nextTick(() => {
    let lineChart = echarts.getInstanceByDom(
      document.getElementById("twelfth-chart")
    );
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("twelfth-chart"));

    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
        // formatter: function (params) {
        //   let template = `${params[0].axisValue}<br>`;
        //   for(let i = 0; i < params.length; i++){
        //     let item = params[i];
        //     template += item.marker + '水位值: ' + item.value + 'm' + '<br>'
        //   }
        //   return template
        // },
      },
      grid: {
        top: "50px",
        left: "80px",
        right: "15px",
        bottom: "40px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: {
          color: "rgba(255,255,255,0.85)",
          fontSize: "16px",
        },
        data: xAxisData1.value,
      },
      yAxis: {
        type: "value",
        name: "单位（万吨）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
        },
        axisLabel: {
          color: "rgba(255,255,255,0.65)",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
      series: [
        {
          data: seriesData5.value,
          type: "line",
          itemStyle: {
            color: "#78DFFF",
          },
          lineStyle: {
            color: '#78DFFF',
            width: 2,
          },
          symbol: 'circle',
          symbolSize: 6,
          smooth: true,
        },
      ],
    };
    option && lineChart.setOption(option);
  });
};
const initThirteenthChart = () => {
  nextTick(() => {
    let lineChart = echarts.getInstanceByDom(
      document.getElementById("thirteenth-chart")
    );
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("thirteenth-chart"));

    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
        // formatter: function (params) {
        //   let template = `${params[0].axisValue}<br>`;
        //   for(let i = 0; i < params.length; i++){
        //     let item = params[i];
        //     template += item.marker + '水位值: ' + item.value + 'm' + '<br>'
        //   }
        //   return template
        // },
      },
      grid: {
        top: "50px",
        left: "80px",
        right: "15px",
        bottom: "40px",
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          zoomLock: false,
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: {
          color: "rgba(255,255,255,0.85)",
          fontSize: "16px",
        },
        data: xAxisData2.value,
      },
      yAxis: {
        type: "value",
        name: "单位（万吨）",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "rgba(255,255,255,0.65)",
        },
        axisLabel: {
          color: "rgba(255,255,255,0.65)",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
      series: [
        {
          data: seriesData6.value,
          type: "line",
          itemStyle: {
            color: "#78DFFF",
          },
          lineStyle: {
            color: '#78DFFF',
            width: 2,
          },
          symbol: 'circle',
          symbolSize: 6,
          smooth: true,
        },
      ],
    };
    option && lineChart.setOption(option);
  });
};

//图例
const isShowLegend = ref(false);
const isShowFilter = ref(false);
const qiaoliang = ref(false);
const chuanzha = ref(false);
const gangkou = ref(false);
const ais = ref(false);
const working = ref(false);
const handleFilter = () => {
  OlArcRef.value.filterFn(
    qiaoliang.value,
    chuanzha.value,
    gangkou.value,
    ais.value,
    working.value
  );
};
//区域中心
const checkAll1 = ref(false);
const isIndeterminate1 = ref(false);
const checkedValues1 = ref([]);
const options1 = [
  "东江",
  "西江",
  "北江",
  "粤东",
  "粤西",
  "佛山",
  "广州",
  "南沙",
  "江门",
  "深圳",
  "珠海",
  "梅州",
  "东莞",
  "中山",
  "韶关",
  "阳江",
];
const handleCheckAllChange1 = (val) => {
  checkedValues1.value = val ? options1 : [];
  isIndeterminate1.value = false;
  handleAddLayer();
};
const handleCheckedChange1 = (value) => {
  const checkedCount = value.length;
  checkAll1.value = checkedCount === options1.length;
  isIndeterminate1.value = checkedCount > 0 && checkedCount < options1.length;
  handleAddLayer();
};
//流域
const checkAll2 = ref(false);
const isIndeterminate2 = ref(false);
const checkedValues2 = ref([]);
const options2 = ["北江", "韩江", "西江", "东江"];
const handleCheckAllChange2 = (val) => {
  checkedValues2.value = val ? options2 : [];
  isIndeterminate2.value = false;
  handleAddLayer();
};
const handleCheckedChange2 = (value) => {
  const checkedCount = value.length;
  checkAll2.value = checkedCount === options2.length;
  isIndeterminate2.value = checkedCount > 0 && checkedCount < options2.length;
  handleAddLayer();
};
//等级航道
const checkAll3 = ref(false);
const isIndeterminate3 = ref(false);
const checkedValues3 = ref([]);
const options3 = ["一级航道", "二级航道", "三级航道", "四至七级航道"];
const handleCheckAllChange3 = (val) => {
  checkedValues3.value = val ? options3 : [];
  isIndeterminate3.value = false;
  handleAddLayer();
};
const handleCheckedChange3 = (value) => {
  const checkedCount = value.length;
  checkAll3.value = checkedCount === options3.length;
  isIndeterminate3.value = checkedCount > 0 && checkedCount < options3.length;
  handleAddLayer();
};
const handleAddLayer = () => {
  OlArcRef.value.addLayerFn({
    quyuzhongxin: checkedValues1.value,
    liuyu: checkedValues2.value,
    dengjihangdao: checkedValues3.value,
  });
};

//是否显示iframe
const isShow = ref(false);

onMounted(() => {
  document.title = "数字水运";
  //通航信息
  getProvinceWaterwayDataFn();
  provinceSitFn();
  getWaterwayTotalNumFn();
  getnhdjhdDetailFn();
  //航标总数
  beaconSituationDetailFn();
  rtuBeaconChartFn();
  //船舶概览
  shipSitFn();
  //桥梁信息
  getBgAndWyFn();
  bgDbDistributeFn();
  getDepartFn();
  createScroll();
  createScrolls();
  // bgDistributeFn();
  //船闸信息
  countDataFn();
  // newWaterFunctin();
  initPieChart();
  deformationAlysFn();
  //数字航运
  waterWayCompanyFn();
  waterTransportFn();
  waterCapacityFn();
  //数字港口
  portCompanyFn();
  portMachineFn();
  berthLineFn();
  goodsSitFn();
  // 行政许可
  getLicenceInfoFn();
});

onUnmounted(() => {
  clearScroll();
  clearScrolls();
});

const active = ref(1);
const changeTop = (val) => {
  active.value = val;
  isMore.value = false;
  if (val == 2) {
    nextTick(() => {
      initAdministrativeChart();
    });
  } else {
    nextTick(() => {
      initFirstChart();
    });
  }
};
const isMore = ref(false);
const clickMore = () => {
  isMore.value = !isMore.value;
  if (isMore.value) {
    nextTick(() => {
      initAdministrativeMoreChart();
    });
  } else {
    nextTick(() => {
      initAdministrativeChart();
    });
  }
};

const initAdministrativeChart = () => {
  let secondChart = echarts.getInstanceByDom(
    document.getElementById("administrative-chart")
  );
  if (secondChart == null) {
    secondChart = echarts.init(document.getElementById("administrative-chart"));
  }
  let option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    grid: {
      top: "15%",
      left: "5%",
      right: "17%",
      bottom: "10%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: ["航评审批", "施工审批", "设标审批", "通航建筑物审批"],
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "#FFFFFF",
        },
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位(个)",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "#FFFFFF",
          padding: [0, 30, 0, 0],
        },
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
    ],
    series: [
      {
        data: [
          administrativeData.value.navigationEvaluateCount || 0,
          administrativeData.value.constructionCount || 0,
          administrativeData.value.setNavigationMarkCount || 0,
          administrativeData.value.navigationBuildingCount || 0,
        ],
        type: "bar",
        barWidth: "15%",
        label: {
          show: true,
          position: "top",
          color: "#FFFFFF",
        },
        itemStyle: {
          color: "#78DFFF",
        },
      },
    ],
  };

  option && secondChart.setOption(option);
};
const initAdministrativeMoreChart = () => {
  let secondChart = echarts.getInstanceByDom(
    document.getElementById("administrativeMore-chart")
  );
  if (secondChart == null) {
    secondChart = echarts.init(
      document.getElementById("administrativeMore-chart")
    );
  }
  let option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      confine: true, //限制在图表区域内
    },
    legend: {
      // itemWidth: 6, // 设置图例项的宽度
      // itemHeight: 6, // 设置图例项的高度
      textStyle: {
        fontSize: "16px",
        color: "#FFFFFF",
      },
      itemGap: 20,
      // icon: "circle", //图例设置成圆形
    },
    grid: {
      top: "15%",
      left: "5%",
      right: "17%",
      bottom: "10%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: licenceDetail.value.map((item) => item.orgName.substring(0, 2)),
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "#FFFFFF",
        },
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位(个)",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "#FFFFFF",
          padding: [0, 30, 0, 0],
        },
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        },
        splitLine: {
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "rgba(255,255,255,0.2)",
          },
        },
      },
    ],
    series: [
      {
        name: "批复前",
        data: licenceDetail.value.map((item) => item.count.count1),
        type: "bar",
        barWidth: "15%",
        stack: "Ad",
        label: {
          show: false,
          position: "top",
          color: "#FFFFFF",
        },
        itemStyle: {
          color: "#78DFFF",
        },
      },
      {
        name: "批复中",
        data: licenceDetail.value.map((item) => item.count.count2),
        type: "bar",
        barWidth: "15%",
        stack: "Ad",
        label: {
          show: false,
          position: "top",
          color: "#FFFFFF",
        },
        itemStyle: {
          color: "rgb(243,170,133)",
        },
      },
      {
        name: "已办结",
        data: licenceDetail.value.map((item) => item.count.count3),
        type: "bar",
        barWidth: "15%",
        stack: "Ad",
        label: {
          show: false,
          position: "top",
          color: "#FFFFFF",
        },
        itemStyle: {
          color: "#ffc733",
        },
      },
    ],
  };

  option && secondChart.setOption(option);
};
// 获取数据
const administrativeData = ref({});
const dataInfo = ref({});
const licenceDetail = ref({});
const getLicenceInfoFn = () => {
  getLicenceInfo().then((res) => {
    if (res.code === 200 && res.data) {
      let resData = res.data;
      administrativeData.value = resData[0].licenceInfo;
      licenceDetail.value = resData[1].licenceDetail;
    }
  });
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: Din;
  src: url("../assets/fonts/din.ttf");
}

@font-face {
  font-family: Tx;
  src: url("../assets/fonts/tx.ttf");
}

/* 全局动画定义 */
@keyframes rotate {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

@keyframes shadowMove {
  0% {
    background-position: 0% 50%;
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    background-position: 400% 50%;
    opacity: 0.6;
  }
}

/* 魔法边框样式 */
.magic-border {
  position: relative;
  overflow: hidden;
  border: none !important;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    padding: 1px;
    background: linear-gradient(
      90deg,
      #78dfff 0%,
      #5af5d5 25%,
      #33daff 50%,
      #309cff 75%,
      #78dfff 100%
    );
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotate 3s linear infinite;
    box-shadow: 0 0 20px rgba(120, 223, 255, 0.5);
    z-index: 0;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 5%;
    bottom: -5px;
    width: 90%;
    height: 10px;
    filter: blur(12px);
    background: linear-gradient(
      90deg,
      #78dfff 0%,
      #5af5d5 25%,
      #33daff 50%,
      #309cff 75%,
      #78dfff 100%
    );
    background-size: 300% 100%;
    animation: shadowMove 3s linear infinite;
    opacity: 0.6;
  }

  &:hover::before,
  &:hover::after {
    animation-play-state: paused;
  }
}

/* 确保内容在边框之上 */
.legend .legend-title,
.legend .legend-info,
.legend .legend-item,
.filter .filter-title,
.filter .filter-item,
.filter .el-checkbox-group {
  position: relative;
  z-index: 1;
}

.container {
  width: 5760px;
  height: 1200px;
  transform-origin: 0 0;
  position: relative;
  background: #012138;

  .main {
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: content-box;

    .left-content {
      width: 1648px;

      .item-content {
        height: 1080px;
        box-sizing: content-box;
        background-color: #06324f;

        .item-title {
          background-image: url("../assets/images/big-screen/one-title-bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          font-family: "Tx";
          color: #fff;
          font-size: 26px;
          font-weight: 400;
          height: 40px;
          line-height: 40px;
          padding: 8px 0px 8px 28px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .flex {
          display: flex;
          flex-wrap: wrap;
          box-sizing: content-box;

          .item {
            width: 49%;
            height: 500px;
            box-sizing: content-box;

            .top {
              background-image: url("../assets/images/big-screen/two-title-bg.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 5px 0px;
              margin-bottom: 8px;
              height: 43px;
              .title {
                font-family: "Tx";
                font-size: 24px;
                color: #fff;
                padding-left: 32px;
                white-space: nowrap;
              }
            }

            .top1 {
              background-image: url("../assets/images/big-screen/three-title-bg.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 5px 0px;
              margin-bottom: 8px;
              height: 32px;
              white-space: nowrap;
              display: flex;
              .title {
                font-family: "Tx";
                font-size: 24px;
                color: #fff;
                padding-left: 32px;
                white-space: nowrap;
              }
            }

            .first-part {
              display: flex; /* 使用 Flexbox 布局 */
              align-items: flex-start; /* 垂直对齐到顶部 */
              padding: 12px; /* 内边距 */
              margin-top: -9px;
              .count-item {
                width: 33.33%;
                .name {
                  font-weight: 500;
                  font-size: 18px;
                  color: rgba(255, 255, 255, 0.65) !important;
                }
                .value {
                  font-family: "Din";
                  font-weight: bold;
                  font-size: 32px;
                  color: #ffffff;
                }
              }
              .count1-item {
                width: 66.67%;
                height: 73px;
                background: linear-gradient(
                  90deg,
                  rgba(120, 223, 255, 0.02) 1%,
                  rgba(41, 191, 238, 0.31) 59%,
                  rgba(120, 223, 255, 0) 100%
                );
                border: 1px solid;
                border-image: linear-gradient(
                    360deg,
                    rgba(120, 223, 255, 0),
                    rgba(63, 207, 252, 0.81),
                    rgba(120, 223, 255, 0)
                  )
                  1 1;
                padding: 10px;
                display: flex;
                justify-content: space-between; /* 水平分布子项 */

                .name {
                  font-weight: 500;
                  font-size: 18px;
                  margin-top: -4px;
                  color: rgba(255, 255, 255, 0.65) !important;
                  .first-color {
                    width: 8px;
                    height: 8px;
                    background-color: #ffc733;
                    padding-right: 2px;
                    margin-top: 7px;
                    margin-left: -11px;
                    position: absolute;
                  }
                  .first-color1 {
                    width: 8px;
                    height: 8px;
                    background-color: #78dfff;
                    padding-right: 2px;
                    margin-top: 7px;
                    margin-left: -11px;
                    position: absolute;
                  }
                }
                .value {
                  font-family: "Din";
                  font-weight: bold;
                  font-size: 32px;
                  color: #ffffff;
                }
              }

              .other-count-item {
                width: 20%;
                height: 87px;

                .name {
                  font-weight: 500;
                  font-size: 16px;
                  color: rgba(255, 255, 255, 0.85);
                }

                .value {
                  font-family: "Din";
                  font-weight: bold;
                  font-size: 28px;
                  color: #ffffff;
                }
              }
              .other-count-item1 {
                flex: 1; /* 使每个项平分空间 */
                text-align: center; /* 文本居中 */
                height: 63px;
                width: 66%;
                background: linear-gradient(
                  90deg,
                  rgba(120, 223, 255, 0.02) 1%,
                  rgba(41, 191, 238, 0.31) 59%,
                  rgba(120, 223, 255, 0) 100%
                );
                border: 1px solid;
                border-image: linear-gradient(
                    360deg,
                    rgba(120, 223, 255, 0),
                    rgba(63, 207, 252, 0.81),
                    rgba(120, 223, 255, 0)
                  )
                  1 1;
                padding: 10px;
                display: flex;
                justify-content: space-between; /* 水平分布子项 */
              }
              .name {
                font-weight: 500;
                font-size: 16px;
                color: rgba(255, 255, 255, 0.85);
              }

              .value {
                font-family: "Din";
                font-weight: bold;
                font-size: 28px;
                color: #ffffff;
              }
            }

            .second-part {
              .sub-title {
                font-weight: 500;
                font-size: 22px;
                color: #ffffff;
                border-bottom: 1px solid rgba(120, 223, 255, 0.5);
                padding: 8px 0px 6px 0px;
                margin-top: -11px;
              }

              .list {
                height: 320px;
                overflow-y: scroll;
                box-sizing: content-box;
                margin-top: 10px;

                .list-item {
                  .item-tit {
                    font-weight: 800;
                    font-size: 16px;
                    color: #78dfff;
                    background: #164966;
                    text-align: center;
                    padding: 2px 0;
                  }

                  .item-name {
                    display: flex;

                    div {
                      width: 25%;
                      padding: 2px 0;
                      font-weight: 500;
                      font-size: 14px;
                      color: #ffffff;
                      background: #225a78;
                      text-align: center;
                    }
                  }

                  .item-value {
                    display: flex;

                    div {
                      width: 25%;
                      padding: 2px 0;
                      font-weight: 400;
                      font-size: 14px;
                      color: #ffffff;
                      background: #10405d;
                      text-align: center;
                    }
                  }
                }
              }

              .tips {
                display: flex;
                justify-content: space-between;
                margin-bottom: 8px;

                .tips-item {
                  font-weight: 400;
                  font-size: 15px;
                  color: rgba(255, 255, 255, 0.85);
                  display: flex;
                  align-items: center;

                  .first-color {
                    width: 8px;
                    height: 8px;
                    background-color: #78dfff;
                    padding-right: 2px;
                  }

                  .second-color {
                    width: 8px;
                    height: 8px;
                    background-color: #ffc733;
                    padding-right: 2px;
                  }
                }
                .tips-item1 {
                  font-weight: 400;
                  font-size: 15px;
                  color: rgba(255, 255, 255, 0.65);
                  display: flex;
                  align-items: center;
                }
              }
              @keyframes scroll {
                0% {
                  transform: translateY(0);
                }
                100% {
                  transform: translateY(-50%); /* 滚动到容器的高度 */
                }
              }
              .progress-list {
                height: 260px;
                overflow: hidden; /* 隐藏溢出部分 */
                position: relative; /* 使子元素绝对定位 */
                .progress-scroll {
                  display: flex;
                  flex-direction: column; /* 垂直排列内容 */
                  animation: scroll 220s linear infinite; /*  添加滚动动画 */
                }
                .progress-item {
                  margin-bottom: 4px;

                  .name {
                    display: flex;
                    justify-content: space-between;
                    font-weight: 400;
                    font-size: 14px;
                    color: #ffffff;
                    margin-bottom: 1px;
                  }
                }
              }
            }
            .third {
              display: flex;

              .third-part {
                width: 383px;
                height: 458px;
                display: flex;
                flex-direction: column;
                background: rgba(120, 223, 255, 0.05);
                border-radius: 0px 0px 0px 0px;
                border: 1px solid;
                border-image: linear-gradient(
                    360deg,
                    rgba(120, 223, 255, 0),
                    rgba(63, 207, 252, 0.81),
                    rgba(120, 223, 255, 0)
                  )
                  1 1;
                //  background-image: url("../assets/images/big-screen/bg.png");
                .another-count {
                  margin-top: 20px;
                  margin-left: 20px;
                  width: 83%;
                  display: flex;
                  align-items: center;
                  // background-image: url("../assets/images/big-screen/bg.png");

                  align-items: center;
                  background-repeat: no-repeat;

                  .another-count-item {
                    .img {
                      width: 48px;
                      height: 48px;

                      img {
                        width: 100%;
                        height: 100%;
                      }
                    }

                    .name {
                      font-weight: 500;
                      font-size: 18px;
                      color: rgba(255, 255, 255, 0.85);
                    }

                    .value {
                      font-weight: bold;
                      font-size: 32px;
                      color: #ffffff;
                    }
                  }
                }
              }
            }
            .radio-content {
              .ship-count {
                display: flex;

                .ship-count-item {
                  width: 50%;
                  text-align: center;
                  background-image: url("../assets/images/big-screen/bg.png");
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  padding: 4px 0;

                  .name {
                    font-weight: 500;
                    font-size: 16px;
                    color: rgba(255, 255, 255, 0.85);
                  }

                  .value {
                    font-family: "Din";
                    font-weight: bold;
                    font-size: 28px;
                    color: #ffffff;
                  }
                }
              }

              .select-radio {
                text-align: center;
                margin: 16px 0px 22px 0px;
              }
            }
          }
          .item1 {
            width: 49%;
            height: 500px;
            box-sizing: border-box; /* 改为 border-box 以包括内边距和边框 */
            padding: 10px; /* 添加内边距，以便更好的布局 */

            .top1 {
              background-image: url("../assets/images/big-screen/two-title-bg.png");
              background-size: cover; /* 使背景图像覆盖整个容器 */
              background-repeat: no-repeat;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 5px 0;
              margin-top: -10px;
              white-space: nowrap;
              .title {
                font-family: "Tx";
                font-size: 24px;
                color: #fff;
                padding-left: 32px;
                white-space: nowrap;
              }
            }

            .first-part {
              display: flex;
              flex-direction: column; /* 垂直排列 */
              height: 280px;
              position: relative;
              overflow: hidden; /* 隐藏溢出内容 */
              max-height: 150px; /* 限制显示区域的高度 */
            }
            .scroll-container {
              display: flex;
              font-size: 0; /* 消除空白 */
              flex-direction: column; /* 垂直排列 */
              animation: scroll 15s linear infinite; /* 设置滚动动画 */
              will-change: transform; /* 提示浏览器优化 */
              align-items: stretch; /* 确保所有行高度一致 */
              margin: 0; /* 消除外边距 */
            }
            .row {
              display: flex; /* 使每一行的子项水平排列 */
              justify-content: space-between; /* 均匀分布子项 */
              width: 480px;
              height: 63px;
              margin-bottom: 15px;
            }
            .row1 {
              display: flex; /* 使每一行的子项水平排列 */
              justify-content: space-between; /* 均匀分布子项 */
              width: 480px;
              height: 85px;
              padding: 8px;
              margin-left: -8px;
              // margin: 15px -8px;
              // marign-bottom: 10;
            }
            @keyframes scroll {
              0% {
                transform: translateY(0) translateZ(0);
              }
              100% {
                transform: translateY(-100%) translateZ(0);
              }
            }
            .other-count-item {
              width: 33.3%;
              height: 58px;
              background: linear-gradient(
                90deg,
                rgba(120, 223, 255, 0.02) 1%,
                rgba(41, 191, 238, 0.31) 59%,
                rgba(120, 223, 255, 0) 100%
              );
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;
              padding: 11px;
              display: flex;
              flex-direction: column;
              justify-content: space-between; /* 水平分布子项 */
            }
            .other-count-item1 {
              flex: 1; /* 使每个项平分空间 */
              text-align: center; /* 文本居中 */
              height: 58px;
              width: 66%;
              background: linear-gradient(
                90deg,
                rgba(120, 223, 255, 0.02) 1%,
                rgba(41, 191, 238, 0.31) 59%,
                rgba(120, 223, 255, 0) 100%
              );
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;
              padding: 10px;
              display: flex;
              justify-content: space-between; /* 水平分布子项 */
            }
            .other-count-item2 {
              flex: 1; /* 使每个项平分空间 */
              text-align: center; /* 文本居中 */
              width: 66%;
              height: 61px;
              background: linear-gradient(
                90deg,
                rgba(120, 223, 255, 0.02) 1%,
                rgba(41, 191, 238, 0.31) 59%,
                rgba(120, 223, 255, 0) 100%
              );
              border: 1px solid;
              border-image: linear-gradient(
                  360deg,
                  rgba(120, 223, 255, 0),
                  rgba(63, 207, 252, 0.81),
                  rgba(120, 223, 255, 0)
                )
                1 1;
              padding: 10px;
              display: flex;
              justify-content: space-between; /* 水平分布子项 */
            }
            .sub {
              display: flex;
              justify-content: space-between;
              gap: 20px;
            }

            .name {
              font-weight: 500;
              margin-top: -6px;
              font-size: 16px; /* 字体大小 */
              color: rgba(255, 255, 255, 0.65);
            }

            .value {
              font-family: "Din", sans-serif;
              font-weight: bold;
              font-size: 24px; /* 字体大小 */
              color: #ffffff;
            }

            .second-part {
              .sub-title {
                font-weight: 500;
                font-size: 22px;
                color: #ffffff;
                border-bottom: 1px solid rgba(120, 223, 255, 0.5);
                padding: 8px 0px 6px 0px;
                margin-top: -2px;
              }

              .list {
                height: 320px;
                overflow-y: scroll;
                box-sizing: content-box;
                margin-top: 10px;

                .list-item {
                  .item-tit {
                    font-weight: 800;
                    font-size: 16px;
                    color: #78dfff;
                    background: #164966;
                    text-align: center;
                    padding: 2px 0;
                  }

                  .item-name {
                    display: flex;

                    div {
                      width: 25%;
                      padding: 2px 0;
                      font-weight: 500;
                      font-size: 14px;
                      color: #ffffff;
                      background: #225a78;
                      text-align: center;
                    }
                  }

                  .item-value {
                    display: flex;

                    div {
                      width: 25%;
                      padding: 2px 0;
                      font-weight: 400;
                      font-size: 14px;
                      color: #ffffff;
                      background: #10405d;
                      text-align: center;
                    }
                  }
                }
              }

              .tips {
                display: flex;
                justify-content: space-between;
                margin-bottom: 8px;

                .tips-item {
                  font-weight: 400;
                  font-size: 15px;
                  color: #ffffff;
                  display: flex;
                  align-items: center;

                  .first-color {
                    width: 8px;
                    height: 8px;
                    background-color: #78dfff;
                    padding-right: 2px;
                  }

                  .second-color {
                    width: 8px;
                    height: 8px;
                    background-color: #ffc733;
                    padding-right: 2px;
                  }
                }
              }

              .progress-list {
                height: 268px;
                overflow-y: auto;

                .progress-item {
                  margin-bottom: 8px;

                  .name {
                    font-weight: 400;
                    font-size: 14px;
                    color: #ffffff;
                  }
                }
              }
            }
          }
        }
      }
    }

    .middle-content {
      width: 2464px;
      height: 1080px;
      margin: 40px 0px;
      position: relative;

      .special-topic {
        position: absolute;
        top: 42px;
        left: 10px;
        font-family: "Tx";
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;

        .topic {
          width: 286px;
          height: 40px;
          background-image: url("../assets/images/big-screen/topic-bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 24px;
          color: rgba(255, 255, 255, 0.65);
        }

        .topic:hover {
          width: 286px;
          height: 40px;
          background-image: url("../assets/images/big-screen/topic-active-bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 24px;
        }

        .topic-active {
          width: 286px;
          height: 40px;
          background-image: url("../assets/images/big-screen/topic-active-bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 24px;
        }
      }

      .legend {
        width: 216px;
        background: rgba(5, 48, 68, 0.8);
        border: 1px solid rgba(120, 223, 255, 0.4);
        position: absolute;
        top: 42px;
        right: 318px;

        .legend-title {
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
          background: rgba(4, 35, 54, 0.8);
          border-bottom: 1px solid rgba(120, 223, 255, 0.4);
          padding: 8px 0px 8px 24px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 4px;
          width: 188px;
          margin-left: 3px;
          img {
            padding-right: 24px;
          }
        }

        .legend-info {
          padding: 16px 0px 16px 24px;

          .legend-item {
            display: flex;
            // align-items: center;
            font-weight: 400;
            font-size: 18px;
            color: #ffffff;

            .name {
              padding-left: 4px;
            }
          }
        }
      }

      .filter {
        width: 288px;
        background: rgba(5, 48, 68, 0.8);
        border: 1px solid rgba(120, 223, 255, 0.4);
        position: absolute;
        top: 42px;
        right: 10px;

        .filter-title {
          font-weight: 500;
          font-size: 20px;
          color: #ffffff;
          background: rgba(4, 35, 54, 0.8);
          border-bottom: 1px solid rgba(120, 223, 255, 0.4);
          padding: 8px 0px 8px 24px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 5px;
          width: 255px;
          margin-left: 5px;
          img {
            padding-right: 24px;
          }
        }

        .filter-item {
          margin: 10px 24px;

          .name {
            color: #78dfff;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }

    .right-content {
      width: 1648px;

      .item-content {
        box-sizing: content-box;
        background-color: #06324f;

        .item-title {
          background-image: url("../assets/images/big-screen/one-title-bg.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          font-family: "Tx";
          color: #fff;
          font-size: 26px;
          font-weight: 400;
          height: 40px;
          line-height: 40px;
          padding: 8px 0px 8px 28px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .flex {
          display: flex;
          box-sizing: content-box;

          .item {
            box-sizing: content-box;

            .top {
              background-image: url("../assets/images/big-screen/two-title-bg.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 5px 0px;
              height: 44px;
              // margin-bottom: 24px;
              .tit {
                font-family: "Tx";
                font-size: 24px;
                color: #fff;
                padding-left: 32px;
              }
            }

            .top1 {
              background-image: url("../assets/images/big-screen/three-title-bg.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 5px 0px;
              white-space: nowrap;
              // margin-bottom: 24px;
              .tit {
                font-family: "Tx";
                font-size: 24px;
                color: #fff;
                padding-left: 32px;
                white-space: nowrap;
              }
            }

            .count-one {
              display: flex;

              .left-part {
                width: 30%;
                text-align: center;
                margin: 24px 0;

                .name {
                  font-weight: 600;
                  font-size: 18px;
                  color: #78dfff;
                }

                .value {
                  font-family: Din;
                  font-weight: bold;
                  font-size: 32px;
                  color: #ffffff;
                }

                .base-bg {
                  margin-top: -24px;
                }
              }

              .right-part {
                width: 70%;
                display: flex;
                flex-wrap: wrap;
                margin: 8px 0;

                .right-part-item {
                  width: 33.3%;

                  .val1 {
                    font-weight: 500;
                    font-size: 14px;
                    color: rgba(255, 255, 255, 0.85);
                  }

                  .val2 {
                    font-family: Din;
                    font-weight: bold;
                    font-size: 28px;
                    color: #ffffff;
                  }

                  .val3 {
                    font-weight: 400;
                    font-size: 14px;
                    color: #28ce8e;
                    display: flex;
                    align-items: center;

                    img {
                      width: 14px;
                      height: 14px;
                      padding-top: 4px;
                    }
                  }
                }
              }
            }

            .count-two {
              display: flex;

              .count-two-part {
                width: 50%;
                margin-right: 20px;

                .title {
                  font-weight: 500;
                  font-size: 22px;
                  color: #ffffff;
                  border-bottom: 1px solid rgba(120, 223, 255, 0.5);
                  padding: 8px 0px 6px 0px;
                }

                .count-two-list {
                  display: flex;
                  margin: 20px 0;

                  .count-two-item {
                    display: flex;

                    .img-part {
                      width: 30%;
                      margin-right: 16px;
                    }

                    .count-part {
                      width: 70%;

                      .val1 {
                        font-weight: 500;
                        font-size: 14px;
                        color: rgba(255, 255, 255, 0.85);
                      }

                      .val2 {
                        font-family: Din;
                        font-weight: bold;
                        font-size: 28px;
                        color: #ffffff;
                      }

                      .val3 {
                        font-weight: 400;
                        font-size: 14px;
                        color: #f86220;
                        display: flex;
                        align-items: center;

                        img {
                          width: 14px;
                          height: 14px;
                          padding-top: 4px;
                        }
                      }
                    }
                  }
                }
              }

              .right-part {
                width: 50%;

                .title {
                  font-weight: 500;
                  font-size: 22px;
                  color: #ffffff;
                  border-bottom: 1px solid rgba(120, 223, 255, 0.5);
                  padding: 8px 0px 6px 0px;
                }
              }
            }

            .tabs-content {
              .info-item {
                height: 150px;
                background-image: url("../assets/images/big-screen/bg.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;

                .left-info {
                  margin: 16px 20px 16px 40px;
                  text-align: center;

                  .name {
                    font-weight: 600;
                    font-size: 20px;
                    color: #78dfff;
                  }

                  .value {
                    font-family: Din;
                    font-weight: bold;
                    font-size: 36px;
                    color: #ffffff;
                  }

                  img {
                    margin-top: -50px;
                  }
                }

                .raight-info {
                  display: flex;
                  margin-top: 28px;

                  .val-item {
                    margin-right: 30px;

                    .val1 {
                      font-weight: 500;
                      font-size: 18px;
                      color: rgba(255, 255, 255, 0.85);
                      margin-bottom: 4px;
                    }

                    .val2 {
                      font-family: Din;
                      font-weight: bold;
                      font-size: 32px;
                      color: #ffffff;
                    }
                  }
                }

                .left-info1 {
                  margin: 28px 16px 28px 40px;
                }

                .raight-info1 {
                  margin-top: 17px;

                  .name {
                    font-weight: 500;
                    font-size: 20px;
                    color: #ffffff;
                  }

                  .value {
                    font-family: Din;
                    font-weight: bold;
                    font-size: 46px;
                    color: #ffffff;
                  }
                }
              }
            }

            .count-three {
              display: flex;

              .count-three-part {
                margin-right: 20px;

                .title {
                  font-weight: 500;
                  font-size: 22px;
                  color: #ffffff;
                  border-bottom: 1px solid rgba(120, 223, 255, 0.5);
                  padding: 8px 0px 6px 0px;
                }

                .count-three-info {
                  display: flex;

                  .left-info {
                    width: 40%;
                    text-align: center;
                    margin: 70px 0;

                    .value {
                      font-family: "Din";
                      font-weight: bold;
                      font-size: 40px;
                      color: #ffffff;
                    }

                    .unit {
                      font-weight: 400;
                      font-size: 18px;
                      color: #ffffff;
                    }

                    img {
                      margin-top: -45px;
                    }

                    .name {
                      font-weight: 500;
                      font-size: 18px;
                      color: #ffffff;
                    }
                  }

                  .right-info {
                    width: 60%;
                    display: flex;
                    flex-wrap: wrap;
                    margin: 50px 0px 0px 26px;

                    .val-item {
                      width: 50%;

                      .name {
                        font-weight: 500;
                        font-size: 16px;
                        color: rgba(255, 255, 255, 0.85);
                      }

                      .value {
                        font-weight: bold;
                        font-size: 24px;
                        color: #ffffff;
                      }
                    }
                  }

                  .right-info1 {
                    width: 60%;
                    margin: 65px 0px 0px 40px;

                    .val-item {
                      margin-bottom: 28px;

                      .name {
                        font-weight: 500;
                        font-size: 16px;
                        color: rgba(255, 255, 255, 0.85);
                        margin-bottom: 8px;
                      }

                      .value {
                        font-weight: bold;
                        font-size: 28px;
                        color: #ffffff;
                      }
                    }
                  }
                }
              }
            }

            .details {
              display: flex;
              align-items: center;
              margin: 14px 0px 9px 0px;

              .val1 {
                font-weight: 500;
                font-size: 16px;
                color: rgba(255, 255, 255, 0.85);
                margin-right: 8px;
              }

              .val2 {
                font-family: "Din";
                font-weight: bold;
                font-size: 28px;
                color: #ffffff;
                margin-right: 8px;
              }

              .val3 {
                font-weight: 400;
                font-size: 14px;
                color: #28ce8e;
                display: flex;
                align-items: center;

                img {
                  width: 14px;
                  height: 14px;
                  padding-top: 4px;
                }
              }
            }
          }
        }
      }
    }
  }

  .my-iframe {
    .close-btn {
      font-family: "Tx";
      position: absolute;
      top: 40px;
      left: 1940px;
      color: #ffffff;
      font-size: 20px;
      background-image: url("../assets/images/big-screen/back-bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 236px;
      height: 44px;
      line-height: 44px;
      text-align: center;
    }
  }
}

// 表单样式
:deep(.el-form-item__label) {
  color: #06283e;
}

:deep(.el-input__inner) {
  color: #78dfff;
  background: transparent;
}

:deep(.el-input__wrapper) {
  background-color: transparent;
  box-shadow: 0 0 0 1px #06283e inset;
}

:deep(.el-range-editor--small .el-range-separator) {
  color: #78dfff;
}

:deep(.el-input__inner::placeholder) {
  color: #78dfff;
}

:deep(.el-select .el-input .el-select__caret.el-icon) {
  color: #78dfff;
}

:deep(.el-date-editor .el-range__icon) {
  color: #78dfff;
}

:deep(.el-range-input::placeholder) {
  color: #78dfff;
}

:deep(.el-range-editor--small .el-range-input) {
  color: #78dfff;
}

:deep(.el-cascader .el-input .el-input__suffix-inner .el-icon svg) {
  color: #78dfff;
}

:deep(.el-radio-button__inner) {
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: 1px solid #d9d9d9;
}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  color: #262626;
  background-color: #78dfff;
  border: 1px solid #78dfff;
}

:deep(.el-checkbox) {
  font-weight: 400;
  --el-checkbox-font-size: 18px;
  // color: rgba(255,255,255,0.65);
  color: #fff;
}

:deep(.el-checkbox__inner) {
  background-color: #d8d8d8;
}

:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #78dfff;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
  background-color: #78dfff;
  border-color: #78dfff;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #78dfff;
  border-color: #78dfff;
}

:deep(.el-checkbox__inner::after) {
  box-sizing: content-box;
  content: "";
  border: 1px solid black;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transition: transform 0.15s ease-in 50ms;
  transform-origin: center;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner::before) {
  content: "";
  position: absolute;
  display: block;
  background-color: black;
  height: 2px;
  transform: scale(0.5);
  left: 0;
  right: 0;
  top: 5px;
}

:deep(.el-date-editor .el-range__icon) {
  display: none;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: transparent;
  box-shadow: 0 0 0 1px #06283e inset;
}

:deep(.el-input.is-disabled .el-input__inner) {
  -webkit-text-fill-color: #78dfff;
}

:deep(.el-date-editor .el-range-input) {
  color: #78dfff;
}

:deep(.el-date-editor .el-range-separator) {
  color: #78dfff;
}

:deep(.el-input__prefix) {
  display: none;
}

//滚动条样式
::-webkit-scrollbar {
  width: 0px !important;
}

// 表格样式
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: transparent;
  color: #fff;
}

:deep(.el-table th) {
  background: rgba(1, 128, 240, 0.1);
  text-align: center;
}

:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  border: 0px;
  color: #fff;
  font-size: 14px;
  font-weight: Normal;
  padding: 4px 0;
  text-align: center;
}
:deep(.el-table tr:nth-child(odd)) {
  background-color: rgba(255, 255, 255, 0.05); /* 奇数行颜色 */
}

:deep(.el-table tr:nth-child(even)) {
  background-color: rgba(255, 255, 255, 0.1); /* 偶数行颜色 */
}
// 修改高亮当前行颜色
:deep(.el-table tbody tr:hover > td) {
  background: #063570 !important;
}

//去掉最下面的那一条线
.el-table::before {
  height: 0px;
}

:deep(.el-table__inner-wrapper::before) {
  background-color: transparent;
}

//去掉表头下面的那一条线
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: 0;
}

:deep(.el-progress__text) {
  color: #ffffff;
}

.top-new {
  justify-content: start !important;

  // .title {
  //   cursor: pointer;

  //   &.active {
  //     color: #409eff !important;
  //   }
  // }
}

.administrative-licensing {
  width: 100%;

  .more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 40px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    margin-bottom: 10px;

    span {
      display: flex;
      align-items: center;
    }

    &:hover {
      color: #409eff !important;
    }
  }

  .first-part {
    .count-item {
      width: 25% !important;

      .name {
        font-size: 16px !important;
      }

      .value {
        font-size: 28px !important;
      }
    }
  }

  .second {
    margin-top: 20px;
    display: flex;
    align-items: center;

    .count-item {
      width: 50% !important;
    }
  }

  #administrative-chart {
    width: 100%;
    height: 280px;
  }
}

:deep(.el-select__wrapper) {
  background-color: transparent;
  box-shadow: 0 0 0 1px #06283e;
}

:deep(.el-select__placeholder) {
  color: #78dfff;
  line-height: 32px;
}

:deep(
    .el-radio-button.is-active
      .el-radio-button__original-radio:not(:disabled)
      + .el-radio-button__inner
  ) {
  color: #262626;
  background-color: #78dfff;
  border: 1px solid #78dfff;
}

:deep(.el-icon svg) {
  color: #78dfff;
}
/* 光效  */
.shimmer-container {
  width: 500px;
  height: 15px;
  background: linear-gradient(
    to right,
    rgba(0, 28, 67, -31.5),
    rgba(4, 76, 99, -1.3),
    rgba(0, 28, 67, -0.5)
  );
  overflow: hidden;
  position: absolute;
  z-index: 0;
  margin-left: -9px;
  margin-top: 42px;
  border-radius: 2px;
}

.shimmer-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -220px;
  width: 220px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 183, 255, 0) 0%,
    rgba(0, 183, 255, 0.4) 20%,
    rgba(95, 242, 255, 0.95) 50%,
    rgba(0, 183, 255, 0.4) 80%,
    rgba(0, 183, 255, 0) 100%
  );
  opacity: 1;
  transform: skewX(-30deg);
  animation: shimmer 3.5s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.8));
}

@keyframes shimmer {
  0% {
    left: -220px;
    filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(95, 242, 255, 0.8));
  }
  100% {
    left: 720px;
    filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.5));
  }
}

@media (max-width: 600px) {
  .shimmer-container {
    width: 85%;
    margin: 20px auto;
    box-shadow: 0 4px 15px rgba(0, 195, 255, 0.5);
  }
  @keyframes shimmer {
    0% {
      left: -220px;
      filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.5));
    }
    50% {
      filter: drop-shadow(0 0 8px rgba(95, 242, 255, 0.8));
    }
    100% {
      left: calc(100% + 220px);
      filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.5));
    }
  }
}

//第二个扫光
.shimmer-container1 {
  width: 739px;
  height: 15px;
  background: linear-gradient(
    to right,
    rgba(0, 28, 67, -0.5),
    rgba(4, 76, 99, -0.3),
    rgba(0, 28, 67, -0.5)
  );
  overflow: hidden;
  position: relative;
  z-index: 0;
  margin-left: -338px;
  margin-top: 61px;
  border-radius: 2px;
}

.shimmer-container1::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 183, 255, 0) 0%,
    rgba(0, 183, 255, 0.4) 20%,
    rgba(95, 242, 255, 0.95) 50%,
    rgba(0, 183, 255, 0.4) 80%,
    rgba(0, 183, 255, 0) 100%
  );
  transform: skewX(-35deg);
  animation: shimmer1 3.5s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(0, 217, 255, 0.8));
}

@keyframes shimmer1 {
  0% {
    left: -250px;
    filter: drop-shadow(0 0 5px rgba(9, 109, 217, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(132, 196, 255, 0.8));
  }
  100% {
    left: 850px;
    filter: drop-shadow(0 0 5px rgba(9, 109, 217, 0.5));
  }
}

@media (max-width: 600px) {
  .shimmer-container1 {
    width: 85%;
    margin: 20px auto;
    box-shadow: 0 4px 15px rgba(0, 217, 255, 0.5);
  }
  @keyframes shimmer1 {
    0% {
      left: -250px;
      filter: drop-shadow(0 0 5px rgba(9, 109, 217, 0.5));
    }
    50% {
      filter: drop-shadow(0 0 8px rgba(132, 196, 255, 0.8));
    }
    100% {
      left: calc(100% + 250px);
      filter: drop-shadow(0 0 5px rgba(9, 109, 217, 0.5));
    }
  }
}
//第三个扫光
.shimmer-container3 {
  width: 989px;
  height: 15px;
  background: linear-gradient(
    to right,
    rgba(0, 28, 67, -0.5),
    rgba(4, 76, 99, -0.3),
    rgba(0, 28, 67, -0.5)
  );
  overflow: hidden;
  position: relative;
  z-index: 0;
  margin-left: -338px;
  margin-top: 61px;
  border-radius: 2px;
}

.shimmer-container3::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 183, 255, 0) 0%,
    rgba(0, 183, 255, 0.4) 20%,
    rgba(95, 242, 255, 0.95) 50%,
    rgba(0, 183, 255, 0.4) 80%,
    rgba(0, 183, 255, 0) 100%
  );
  transform: skewX(-35deg);
  animation: shimmer1 3.5s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(0, 217, 255, 0.8));
}

@keyframes shimmer3 {
  0% {
    left: -250px;
    filter: drop-shadow(0 0 5px rgba(9, 109, 217, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(132, 196, 255, 0.8));
  }
  100% {
    left: 850px;
    filter: drop-shadow(0 0 5px rgba(9, 109, 217, 0.5));
  }
}

@media (max-width: 600px) {
  .shimmer-container3 {
    width: 85%;
    margin: 20px auto;
    box-shadow: 0 4px 15px rgba(0, 217, 255, 0.5);
  }
  @keyframes shimmer3 {
    0% {
      left: -250px;
      filter: drop-shadow(0 0 5px rgba(9, 109, 217, 0.5));
    }
    50% {
      filter: drop-shadow(0 0 8px rgba(132, 196, 255, 0.8));
    }
    100% {
      left: calc(100% + 250px);
      filter: drop-shadow(0 0 5px rgba(9, 109, 217, 0.5));
    }
  }
}
// 第四个
.shimmer-container4 {
  width: 989px;
  height: 15px;
  background: linear-gradient(
    to right,
    rgba(0, 28, 67, 0),
    rgba(4, 76, 99, 0),
    rgba(0, 28, 67, 0)
  );
  overflow: hidden;
  position: relative;
  z-index: 0;
  margin-left: -11px;
  margin-top: -10px;
  border-radius: 2px;
}

.shimmer-container4::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 183, 255, 0) 0%,
    rgba(0, 183, 255, 0.4) 20%,
    rgba(95, 242, 255, 0.95) 50%,
    rgba(0, 183, 255, 0.4) 80%,
    rgba(0, 183, 255, 0) 100%
  );
  transform: skewX(-35deg);
  animation: shimmer1 3.5s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(0, 217, 255, 0.8));
}

@keyframes shimmer4 {
  0% {
    left: -250px;
    filter: drop-shadow(0 0 5px rgba(9, 109, 217, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(132, 196, 255, 0.8));
  }
  100% {
    left: 850px;
    filter: drop-shadow(0 0 5px rgba(9, 109, 217, 0.5));
  }
}

@media (max-width: 600px) {
  .shimmer-container4 {
    width: 85%;
    margin: 20px auto;
    box-shadow: 0 4px 15px rgba(0, 217, 255, 0.5);
  }
  @keyframes shimmer4 {
    0% {
      left: -250px;
      filter: drop-shadow(0 0 5px rgba(9, 109, 217, 0.5));
    }
    50% {
      filter: drop-shadow(0 0 8px rgba(132, 196, 255, 0.8));
    }
    100% {
      left: calc(100% + 250px);
      filter: drop-shadow(0 0 5px rgba(9, 109, 217, 0.5));
    }
  }
}
</style>
